Enhanced Hover-activated Tooltips In jQuery - easyTooltip

File Size: 7.2 KB
Views Total: 1641
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Enhanced Hover-activated Tooltips In jQuery - easyTooltip

An easy-to-use yet highly customizable jQuery tooltip plugin to display any HTML content in a popup box when you hover over an element.


  • 4 positions options: top, right, bottom, left.
  • Custom CSS styles.
  • Custom arrow styles.
  • Follow your cursor or not.

How to use it:

1. Insert the minified version of the easyTooltip plugin after loading jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/easyTooltip.min.js"></script>

2. Attach the tooltip to an element and define the tooltip content in the content option:

  content: "<span style='color:blue;'>I am </span><span style='color:red;'>a rich content tooltip.</span>"

3. Or fetch the tooltip content directly from within the document.

<div id="existedContentId">Tooltip Content Here</div>
  existedContentId: "existedContentId"

4. Determine the position of the tooltip:

  • top (Default)
  • bottom
  • left
  • right
  tooltipDir: "left"

5. By default the tooltip adjusts the tooltip position relative to the mouse cursor. You can make the tooltip 'Sticky' by settings the tooltipPosition to 'relative'.

  tooltipPosition: 'relative'

6. Override the default CSS class of the tooltip.

  tooltipClass: "easyTooltip"

7. Determine whether to dismiss the tooltip on click. Default: false.

  clickRemove: true

8. Specify the x & y offsets of the tooltip. Default: 5.

  xOffset: 10,
  yOffset: 10

9. Customize the appearance of the tooltip.

  defaultRadius: "3px",
  tooltipZindex: 1000,
  tooltipPadding: "10px 15px",
  tooltipBgColor: "rgba(200,200,200,0.7)",
  tooltipFtSize: "14px",
  tooltipLineHeight: "24px",
  tooltipFtColor: "#000",
  tooltipOpacity: 1,
  tooltipArwBorderWidth: 6

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