Create Custom HTML Tooltips With JavaScript – YoyoTooltip.js

Yoyo Tooltip is a lightweight JavaScript library that lets you attach customizable HTML tooltips to any element with a single JS call.

The library supports tooltips in four directions (top, bottom, left, right) and can be triggered by hover or click events.

How to use it:

1. Download the ‘yoyo-tooltip.min.js’ script and insert it in your HTML document:

<script src="yoyo-tooltip.js"></script>

2. Create a `yoyoTooltip()` instance by specifying the target element and defining your tooltip content:

yoyoTooltip({
  id: '#demo',
  content: '<b>CSSScript</b>.com',
});

3. Customize the tooltip’s direction (default is ‘top’):

yoyoTooltip({
  id: '#demo',
  content: '<b>CSSScript</b>.com',
  direction: 'bottom',
});

4. To trigger the tooltip on click instead of hover:

yoyoTooltip({
  id: '#demo',
  content: '<b>CSSScript</b>.com',
  trigger: 'click',
});

5. All available options to customize both the tooltip and the target element:

yoyoTooltip({
  // customize the tooltip
  delay: '0',
  backgroundColor: '#333',
  color: 'white',
  boxShadow: 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px',
  // customize the target element
  targetHighlight: true,
  targetTextDecoration: 'underline dotted red 1px',
  targetUnderlineOffset: '5px',
  targetBackgroundColor: '',
  targetFontWeight: '',
});

Changelog:

v1.0.1 (08/26/2024)

• Update