Easy-to-style Rich Text Tooltip Plugin For jQuery

Just another jQuery plugin for creating dynamic, customizable, easy-to-style tooltip popups that support custom trigger events, rich text (links, images, etc.) and all directions (top, right, bottom, left).

How to use it:

1. Insert the main JavaScript file after you've loaded jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="plugin.js"></script>

2. Call the function on the target element where you want to display a tooltip on mouse hover.

$('.tooltip').tooltip({
  text: 'my first tooltip',
  html: "<div> HTML HERE </div>"
});

3. Apply your own CSS styles & animations to the tooltip.

.tip{
  color: wheat;
  padding: 5px 10px;
  position: absolute;
  background: #333333;
  max-width: 200px;
  color: #ffffff;
}

4. Change the default direction:

$('.tooltip').tooltip({
  text: 'my first tooltip',
  html: "<div> HTML HERE </div>",
  position: 'bottom'
});

5. Decide whether to display the shadow.

$('.tooltip').tooltip({
  text: 'my first tooltip',
  html: "<div> HTML HERE </div>",
  position: 'bottom',
  shadow: true
});

6. Add custom trigger element to the tooltip.

$('.tooltip').tooltip({
  text: 'my first tooltip',
  html: "<div> HTML HERE </div>",
  position: 'bottom',
  shadow: false,
  trigger: 'hover'
});

---

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