Easy tooltip 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, and Left.
- Custom CSS Styles.
- Custom stock patterns.
- Follow your indicator or not.
How to make use of it:
1. Insert the Tooltip 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 contained within the content option:
$("#myElement").easyTooltip({
content: "<span style='color:blue;'>I am </span><span style='color:red;'>a rich content tooltip.</span>"
});3. Or tooltip content immediately from throughout the document.
<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
});See Demo And Download
Official Website(Alvinyw): Click Here
This superior jQuery/javascript plugin is developed by Alvinyw. For extra Advanced Usage, please go to the official website.
