Custom Dark/Light Tooltips In jQuery - Tooltip.js

An easy to use jQuery plugin to replace and enhance the default browser tooltips with custom styles, positions, themes, and trigger events.

How to use it:

1. Import the stylesheet tooltip.css and JavaScript tooltip.js into the HTML file.

<link href="tooltip.css" rel="stylesheet" />
<script src="/path/to/jquery.min.js"></script>
<script src="tooltip.js"></script>

2. Attact a custom tooltip to the desired element and define the tooltip content in the data-tooltip attribute.

<button data-tooltip="Tooltip Content">
  Default
</button>

3. Initialize the plugin and done.

$('[data-tooltip]').tooltip({
  // options here
});

4. Specify the placement of the tooltip. All position options:

• 'top' (default)
• 'topLeft'
• 'topRight'
• 'right'
• 'rightTop'
• 'rightBottom'
• 'bottom'
• 'bottomLeft'
• 'bottomRight'
• 'left'
• 'leftTop'
• 'leftBottom'

$('[data-tooltip]').tooltip({
  placement: 'top'
});

5. Use the Light theme instead.

$('[data-tooltip]').tooltip({
  theme: 'light'
});

6. Automatically re-position the tooltip when there is NOT enough space. Default: true.

$('[data-tooltip]').tooltip({
  autoPlace: true
});

7. Customize the trigger event:

• 'hover' (Default)
• 'click'
• 'focus'

$('[data-tooltip]').tooltip({
  trigger: 'click'
});

8. Customize the time to wait before showing the tooltip when triggered. Default: 10ms.

$('[data-tooltip]').tooltip({
  delay: 100
});

---

This awesome jQuery plugin is developed by shulkme. For more Advanced Usages, please check the demo page or visit the official website.