Lightweight Animated Tooltip Plugin For JavaScript – MarcTooltips.js

Category: Javascript , Tooltip | June 24, 2017
Author: marcrobledo
Views Total: 419 views
Official Page: Go to website
Last Update: June 24, 2017
License: MIT

Preview:

Lightweight Animated Tooltip Plugin For JavaScript – MarcTooltips.js

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'
});

You Might Be Interested In:


Leave a Reply