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.

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.