Custom Dark/Light Tooltips In jQuery - Tooltip.js

File Size: 8.64 KB
Views Total: 1422
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

3. Initialize the plugin and done.

  // 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'
  placement: 'top'

5. Use the Light theme instead.

  theme: 'light'

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

  autoPlace: true

7. Customize the trigger event:

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

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

  delay: 100

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