Lightweight Animated Tooltip Plugin For JavaScript – MarcTooltips.js

Preview:

Description:

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

How to use it:

Link to the MarcTooltips’ JavaScript and Stylesheet:

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

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

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

Change the default trigger event.

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

Change the default position and alignment.

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

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

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