Flexible and Beautiful Tooltip Plugin - powertip

powertip is a jQuery based Flexible and Beautiful Tooltip Plugin which supports for complex data. It is highly customizable and provides a number of different ways to use the tooltips.

Features:

• Straightforward implementation
• Simple configuration
• Supports static tooltips as well as tooltips that follow the mouse
• Ability to let users mouse on to the tooltips and interact with their content
• Mouse follow tooltips are constrained to the browser viewport
• Easy customization
• Works with keyboard navigation
• Smooth fade-ins and fade-outs
• Smart placement that (when enabled) will try to keep tooltips inside of the view port
• Multiple instances
• Works on any type of element
• Supports complex content (markup with behavior & events)
• Actively maintained
• Checks for hover intent
• Tooltip queuing

Javascript files:

• core.js: Core variables, plugin object, and API.
• csscoordinates.js: CSSCoordinates object for describing CSS positions.
• displaycontroller.js: DisplayController object used to manage tooltips for elements.
• placementcalculator.js: PlacementCalculator object that computes tooltip position.
• tooltipcontroller.js: TooltipController object that manages tips for an instance.
• utility.js: Private helper functions.

Basic Usage:

1. Include necessary javascript files in the head section of your page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="../src/core.js"></script>
<script type="text/javascript" src="../src/csscoordinates.js"></script>
<script type="text/javascript" src="../src/displaycontroller.js"></script>
<script type="text/javascript" src="../src/placementcalculator.js"></script>
<script type="text/javascript" src="../src/tooltipcontroller.js"></script>
<script type="text/javascript" src="../src/utility.js"></script>

2. Include jQuery powertip CSS to style your tooltips

<link rel="stylesheet" type="text/css" href="../css/jquery.powertip.css" />

3. Markup

<input type="button" class="north-west-alt" value="North West Alt" title="North west alt placement" />

4. Call the plugin and set the tooltip position.

<script type="text/javascript">
$(function() {
$('.north-west').powerTip({ placement: 'nw' });
});
</script>

5. All available options.

$('.element').powerTip({ 

  // Boolean If set to true the tooltip will follow the users mouse cursor.
  followMouse: false,

  // Boolean Allow the mouse to hover on the tooltip. This lets users interact with the content in the tooltip. Only works if followMouse is set to false.
  mouseOnToPopup: false, 

  // When enabled the plugin will try to keep tips inside the browser view port. 
  // If a tooltip would extend outside of the view port then its placement will be changed to an orientation that would be entirely within the current view port. 
  // Only applies if followMouse is set to false.
  smartPlacement: false, 

  // Placement location of the tooltip relative to the element it is open for. 
  // Values can be n, e, s, w, nw, ne, sw, se, nw-alt, ne-alt, sw-alt, or se-alt (as in north, east, south, and west). 
  // This only matters if followMouse is set to false.
  placement: 'n',

  // String  HTML id attribute for the tooltip div.
  popupId: 'powerTip',  

  // Number  Pixel offset of the tooltip. This will be the offset from the element the tooltip is open for, or from from mouse cursor if followMouse is true.
  offset: 10,  

  // Number  Tooltip fade-in time in milliseconds.
  fadeInTime: 200,

  // Tooltip fade-out time in milliseconds.
  fadeOutTime: 100,

  // Time in milliseconds to wait after mouse cursor leaves the element before closing the tooltip. 
  // This serves two purposes: first, it is the mechanism that lets the mouse cursor reach the tooltip (cross the gap between the element and the tooltip div) for mouseOnToPopup tooltips. 
  // And, second, it lets the cursor briefly leave the element and return without causing the whole fade-out, intent test, and fade-in cycle to happen.
  closeDelay: 100,

  // Hover intent polling interval in milliseconds.
  intentPollInterval: 100,

  // Hover intent sensitivity. 
  // The tooltip will not open unless the number of pixels the mouse has moved within the intentPollInterval is less than this value. 
  // These default values mean that if the mouse cursor has moved 7 or more pixels in 100 milliseconds the tooltip will not open.
  intentSensitivity: 7,

  // If set to true then PowerTip will not hook up its event handlers, letting you create your own event handlers to control when tooltips are shown (using the API to open and close tooltips).
  manual: false,

  openEvents: [ 'mouseenter', 'focus' ],
  closeEvents: [ 'mouseleave', 'blur' ]

});

Changelog:

v1.3.2 (2022-03-07)

• Fixed mouse close event being set when mouseOnToPopup is enabled but closeEvents option doesn't include mouseleave.
• Fixed performance regression when setting up a very large number of tooltips with repeated powerTip() calls.

v1.3.1 (2018-10-15)

• Mouse-follow tooltips will now fall back to static placement when opened via a non-mouse event.
• Apply popupClass before tooltip positioning.
• Fixed non-functional tooltips on even number repeated powerTip() calls on the same element(s).
• Fixed issue with non-mouse events tracking invalid coordinates on Firefox with jQuery 3.
• Fixed destroy() API method not cleaning up a currently open tooltip.
• Fixed mouse follow tooltip placement when corner trapped on a horizontally scrolled page.
• Refactor closeDesyncedTip() to improve readability.
• Added CSS arrow content hack to force redraw in IE8.

v1.3.0 (2017-01-16)

• Added openEvents and closeEvents options.
• Added popupClass option for custom tooltip classes.
• Added CommonJS/Browserify support.
• The destroy() API method elements argument is now optional. When omitted all instances will be destroyed.
• Added toggle() method to the API.
• The closeDelay timer is now correctly shared between all tooltips.
• Browser dimensions cache is now initialized as soon as PowerTip loads.
• Fixed queuing issue when the API hide() method is called immediately after show().
• Fixed error when an element with an open tooltip is deleted.
• The mouseOnToPopup option will now be ignored (forced false) when the manual option is enabled.
• Fixed possible repeated event hooks when mouseOnToPopup is enabled.
• Fixed mouseOnToPopup events being applied to other instances where manual is enabled.
• Fixed old placement classes remaining on tip element when using reposition API and smart placement.
• Fixed script url in the examples HTML file incuded in the release.
• Documented the caching quirks for changing tooltip content.
• PowerTip is now officially available on npm (as "jquery-powertip").

---

This awesome jQuery plugin is developed by stevenbenner. For more Advanced Usages, please check the demo page or visit the official website.