Press "Enter" to skip to content

A Tooltip Plugin Implemented in Conjunction With jQuery | easyTooltip

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

Read More  Animated Tooltip Component Using HTML, Vanilla JavaScript

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *