MarcTooltips.js is a JavaScript library for attaching a custom CSS3 animated tooltip to any element that can be triggered by hovering, clicking, and/or focusing events.

javascript tooltip on hover, jquery tooltip on hover, jquery tooltip with html content, jquery tooltip example, tooltip plugin

How to make use of it:

1. Link to javascript and stylesheet at MarcTooltips:

<link href="MarcTooltips.css" rel="stylesheet">
<script src="MarcTooltips.js"></script>

2. Create a basic tooltip that will be triggered by the hover event.

MarcTooltips.add('#element', 'Tooltip text here');

3. Change the default event trigger.

MarcTooltips.add('#element', 'Tooltip text here', {
  onClick:true, // trigger on click
  onFocus:true // trigger on focus
});

4. Change the default position and alignment.

MarcTooltips.add('#element', 'Tooltip text here', {
  position: 'down|up|left|right',
  align: 'center|left|right|top|bottom'
});

5. Add an additional CSS class to the tooltip. Useful for creating your own patterns.

MarcTooltips.add('#element', 'Tooltip text here', {
  className: 'additional-classname'
});

Lightweight Animated Tooltip, MarcTooltips.js Plugin/Github

See Demo And Download

Official Website(marcrobledo): Click Here

This superior jQuery/javascript plugin is developed by marcrobledo. For extra advanced usage, please go to the official website.