Tooltipster is super flexible and easy to use jQuery plugin for modern tooltip. It permits you to use any HTML markup within your tooltips. It implies that you'll be able to insert things like pictures and text information tags.

Features:

• It can be installed with NPM and Bower
• Super flexible and easy to implement.
• Supports various types of predefined animations.
• Custom HTML structure supported.
• Can be choose different types of themes.
• Supports multiple tooltip within the same element.

Install with Bower

$ bower install tooltipster

Install with npm

$ npm install tooltipster

How to use it:

1. Include the Javascript tooltipster.bundle.min.js at the bottom of the web page.

<script src="path/to/tooltipster.bundle.min.js"></script>

2. Include the CSS tooltipster.bundle.min.css in the header of the page.

<link rel="stylesheet" href="path/to/tooltipster.bundle.min.css">

3. There are many predefined css for tooltip theme, add them accordingly as you need.

<link rel="stylesheet" href="path/to/tooltipster-sideTip-borderless.min.css">
<link rel="stylesheet" href="path/to/tooltipster-sideTip-light.min.css">
<link rel="stylesheet" href="path/to/tooltipster-sideTip-noir.min.css">
<link rel="stylesheet" href="path/to/tooltipster-sideTip-punk.min.css">
<link rel="stylesheet" href="path/to/tooltipster-sideTip-shadow.min.css">

4. Add the basic HTML to the page.

// Putting a tooltip on an image:
<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />
// Putting a tooltip on some text (span, div or whatever):
<span class="tooltip" title="This is my span's tooltip message!">Some text</span>

5. Initialize the plugin and we're ready to go.

$(document).ready(function() {
    $('.tooltip').tooltipster();
});

Style your tooltips

$('.tooltip').tooltipster({
    theme: 'tooltipster-noir'
});

You can use any predefined themes - tooltipster-borderless, tooltipster-light, tooltipster-noir, tooltipster-punk, tooltipster-shadow

*** Don't forget to add respective css for each theme as listed below. You can find the css here - dist\css\plugins\tooltipster\sideTip\themes

• tooltipster-sideTip-borderless.min.css - tooltipster-borderless
• tooltipster-sideTip-light.min.css - tooltipster-light
• tooltipster-sideTip-noir.min.css - tooltipster-noir
• tooltipster-sideTip-punk.min.css - tooltipster-punk
• tooltipster-sideTip-shadow.min.css - tooltipster-shadow

Styling your tooltips with a custom look

$('.tooltip').tooltipster({
    theme: ['tooltipster-noir', 'tooltipster-noir-customized']
});

/* This is how you would create a custom secondary theme on top of tooltipster-noir: */
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
	background: grey;
	border: 3px solid red;
	border-radius: 6px;
	box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
	color: blue;
	padding: 8px;
}

Use structural HTML inside your tooltips

<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span>
<div class="tooltip_templates">
  <span id="tooltip_content">
    <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
  </span>
</div>

$('.tooltip').tooltipster({
    contentCloning: true
});

.tooltip_templates { display: none; }

Plugin's default options:

Parameter	Type	Default	Description
animation	'fade', 'grow', 'swing', 'slide', 'fall'	'fade'	Determines how the tooltip will animate in and out. In addition to the built-in transitions, you may also create custom transitions in your CSS files. In IE9 and lower, all animations default to a JavaScript generated, fade animation.
animationDuration	integer, integer[]	350	Sets the duration of the animation, in milliseconds. If you wish to provide different durations for the opening and closing animations, provide an array of two different values.
arrow	boolean	true	Add a "speech bubble" arrow to the tooltip.
content	string, jQuery object, any	null	If set, this will override the content of the tooltip. If you provide something else than a string or jQuery-wrapped HTML element, you will need to use the 'functionFormat' option to format your content for display.
contentAsHTML	boolean	false	If the content of the tooltip is provided as a string, it is displayed as plain text by default. If this content should actually be interpreted as HTML, set this option to true.
contentCloning	boolean	false	If you provide a jQuery object to the 'content' option, this sets if it is a clone of this object that should actually be used.
debug	boolean	true	Tooltipster logs hints and notices into the console when you're doing something you ideally shouldn't be doing. Set to false to disable logging.
delay	integer, integer[]	300	Upon mouse interaction, this is the delay before the tooltip starts its opening and closing animations when the 'hover' trigger is used (*). If you wish to specify different delays for opening and closing, you may provide an array of two different values.
delayTouch	integer, integer[]	[300, 500]	Upon touch interaction, this is the delay before the tooltip starts its opening and closing animations when the 'hover' trigger is used (*). If you wish to specify different delays for opening and closing, you may provide an array of two different values.
distance	integer, integer[]	6	The distance between the origin and the tooltip, in pixels. The value may be an integer or an array of integers (in the usual CSS syntax) if you wish to specify a different distance for each side.
functionInit	function	none (null)	A custom function to be fired only once at instantiation.
functionBefore	function	none (null)	A custom function to be fired before the tooltip is opened. This function may prevent the opening if it returns false.
functionReady	function	none (null)	A custom function to be fired when the tooltip and its contents have been added to the DOM.
functionAfter	function	none (null)	A custom function to be fired once the tooltip has been closed and removed from the DOM.
functionFormat	function	none (null)	A custom function that does not modify the content but that can format it for display. It gets the two first usual and also the content as third argument. It must return the value that will be displayed in the tooltip, either a string or a jQuery-wrapped HTML element.
functionPosition	function	none (null)	A custom function fired when the tooltip is repositioned. It gives you the ability to slightly or completely modify the position that Tooltipster is about to give to the tooltip. It gets the proposed set of placement values as third argument. The function must return the set of placement values, which you may have edited.
IEmin	integer	6	The minimum version of Internet Explorer to run on.
interactive	boolean	false	Give users the possibility to interact with the content of the tooltip. If you want them to be able to make clicks, fill forms or do other interactions inside the tooltip, you have to set this option to true. When the 'hover' close trigger is used, the user has to move the cursor to the tooltip before it starts closing (this lapse of time has its duration set by the 'delay' option).
maxWidth	integer	null (no max width)	Set a maximum width for the tooltip.
minIntersection	integer	16	Corresponds to the minimum distance to enforce between the center of the arrow and the edges of the tooltip. Mainly used to create an arrow bigger than those of the default themes.
minWidth	integer	0 (auto width)	Set a minimum width for the tooltip.
multiple	boolean	false	Allows you to put several tooltips on a single element.
plugins	string[]	['sideTip']	The names of plugins to be used by Tooltipster.
repositionOnScroll	boolean	false	Repositions the tooltip if it goes out of the viewport when the user scrolls the page, in order to keep it visible as long as possible.
restoration	'none', 'previous', 'current'	'none'	Specifies if a TITLE attribute should be restored on the HTML element after a call to the 'destroy' method. This attribute may be omitted, or be restored with the value that existed before Tooltipster was initialized, or be restored with the stringified value of the current content. Note: in case of multiple tooltips on a single element, only the last destroyed tooltip may trigger a restoration.
selfDestruction	boolean	true	Sets if the tooltip should self-destruct after a few seconds when its origin is removed from the DOM. This prevents memory leaks.
side	string, string[]	['top', 'bottom', 'right', 'left']	Sets the side of the tooltip. The value may one of the following: 'top', 'bottom', 'left', 'right'. It may also be an array containing one or more of these values. When using an array, the order of values is taken into account as order of fallbacks and the absence of a side disables it.
timer	integer	0 (disabled)	How long (in ms) the tooltip should live before closing.
theme	string, string[]	empty array	Set a theme that will override the default tooltip appearance. You may provide an array of strings to apply several themes at once.
trackerInterval	integer	500	Sets how often the tracker should run (see trackOrigin and trackTooltip), in milliseconds. The tracker runs even if trackOrigin and trackTooltip are false to check if the origin has not been removed while the tooltip was open, so you shouldn't set too high or too low values unless you need to.
trackOrigin	boolean	false	Repositions the tooltip if the origin moves or is resized. As this option may have an impact on performance, we suggest you enable it only if you need to.
trackTooltip	boolean	false	Repositions the tooltip if its size changes. When the size change results from a call to the 'content' method, the tooltip is already repositioned without the need to enable this option. As this option may have an impact on performance, we suggest you enable it only if you need to.
trigger	'hover', 'click', 'custom'	'hover'	Sets when the tooltip should open and close. 'hover' and 'click' correspond to predefined sets of built-in triggers, while 'custom' lets you create your own, for a completely customized behavior.
triggerClose	object		When 'trigger' is set to 'custom', all built-in close triggers are disabled by default. This option allows you to reactivate the triggers of your choice to create a customized behavior. Only applies if 'trigger' is set to 'custom'.
triggerOpen	object		Similar to 'triggerClose'.
updateAnimation	'fade', 'rotate', 'scale', null	'rotate'	Plays a subtle animation when the content of the tooltip is updated (if the tooltip is open). You may create custom animations in your CSS files. Set to null to disable the animation.
viewportAware	boolean	true	Tries to place the tooltip in such a way that it will be entirely visible on screen when it's opened. If the tooltip is to be opened while its origin is off screen (using a method call), you may want to set this option to false.
zIndex	integer	9999999	Set the z-index of the tooltip.

<span class="tooltip-default" title="This is my span's tooltip message!">Default Tooltip</span>

$('.tooltip-default').tooltipster();

<span class="tooltip-borderless" title="This is my span's tooltip message!">Default Tooltip</span>

$('.tooltip-borderless').tooltipster({
    theme: 'tooltipster-borderless'
});

<span class="tooltip-light" title="This is my span's tooltip message!">Default Tooltip</span>

$('.tooltip-light').tooltipster({
    theme: 'tooltipster-light'
});

<span class="tooltip-noir" title="This is my span's tooltip message!">Default Tooltip</span>

$('.tooltip-noir').tooltipster({
    theme: 'tooltipster-noir'
});

<span class="tooltip-punk" title="This is my span's tooltip message!">Default Tooltip</span>

$('.tooltip-punk').tooltipster({
    theme: 'tooltipster-punk'
});

<span class="tooltip-shadow" title="This is my span's tooltip message!">Default Tooltip</span>

$('.tooltip-shadow').tooltipster({
    theme: 'tooltipster-shadow'
});

<span class="html-tooltip" data-tooltip-content="#tooltip_content">HTML tooltip</span>
<div class="tooltip_templates">
   <span id="tooltip_content">
       <img src="path/to/images/demo/demo-1.jpg" /> <strong>This is the content of my tooltip!</strong>
   </span>
</div>

$('.html-tooltip').tooltipster({
  contentCloning: true
});

.tooltip_templates { display: none; }

<span class="tooltip-custom" title="This is my span's tooltip message!">Custom Tooltip</span>

$('.tooltip-custom').tooltipster({
  theme: ['tooltipster-noir', 'tooltipster-noir-customized']
});

/* This is how you would create a custom secondary theme on top of tooltipster-noir: */
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
	background: grey;
	border: 3px solid red;
	border-radius: 6px;
	box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
	color: blue;
	padding: 8px;
}

<span class="tooltip-interact" title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;">Interact Tooltip</span>

$('.tooltip-interact').tooltipster({
  contentAsHTML: true,
  interactive: true
});

<span class="tooltip-multiple">Miltiple Tooltip</span>

$('.tooltip-multiple').tooltipster({
  animation: 'swing',
  content: 'North',
  side: 'top',
  theme: 'tooltipster-borderless'
});
$('.tooltip-multiple').tooltipster({
  content: 'East',
  multiple: true,
  side: 'right',
  theme: 'tooltipster-punk'
});
$('.tooltip-multiple').tooltipster({
  animation: 'grow',
  content: 'South',
  multiple: true,
  side: 'bottom',
  theme: 'tooltipster-light'
});
$('.tooltip-multiple').tooltipster({
  animation: 'fall',
  content: 'West',
  multiple: true,
  side: 'left',
  theme: 'tooltipster-shadow'
});