Easy tooltips is a plug-in for the ToolTip functionality that is implemented in conjunction with jQuery and a content-oriented plugin that responds to mouse movement.
Features:
- 4 function options: Up, Right, Down, Left.
- Custom CSS Styles.
- Custom stock patterns.
- Follow your indicator or not.
How to make use of it:
1. Insert the minified model of the straightforwardTooltip 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 a component and outline the tooltip content within the content
choice:
$("#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 immediately from throughout the doc.
<div id="existedContentId">Tooltip Content Here</div>
$("#myElement").easyTooltip({ existedContentId: "existedContentId" });
4. Determine the place of the tooltip:
$("#myElement").easyTooltip({ tooltipDir: "left" });
5. By default the tooltip adjusts the tooltip place relative to the mouse cursor. You could 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 or not to dismiss the tooltip on click on.
$("#myElement").easyTooltip({ clickRemove: true });
8. Specify the x & y offsets of the tooltip.
$("#myElement").easyTooltip({ xOffset: 10, yOffset: 10 });
9. Customize the looks 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 });
Enhanced Hover-activated Tooltips, Easy Tooltip Plugin/Github
See Demo And Download
Official Website(Alvinyw): Click Here
This superior jQuery/javascript plugin is developed by Alvinyw. For extra Advanced Usages, please go to the official website.
Be First to Comment