Custom Dark/Light Tooltips In jQuery - Tooltip.js

Custom Dark/Light Tooltips In jQuery - Tooltip.js
File Size: 8.64 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.