Enhanced Hover-activated Tooltips In jQuery - easyTooltip

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

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.

Features:

  • 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:

$("#myElement").easyTooltip({
  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>
$("#myElement").easyTooltip({
  existedContentId: "existedContentId"
});

4. Determine the position of the tooltip:

  • top (Default)
  • bottom
  • left
  • right
$("#myElement").easyTooltip({
  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'.

$("#myElement").easyTooltip({
  tooltipPosition: 'relative'
});

6. Override the default CSS class of the tooltip.

$("#myElement").easyTooltip({
  tooltipClass: "easyTooltip"
});

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

$("#myElement").easyTooltip({
  clickRemove: true
});

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

$("#myElement").easyTooltip({
  xOffset: 10,
  yOffset: 10
});

9. Customize the appearance of the tooltip.

$("#myElement").easyTooltip({
  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.