Concise HTML5 Tooltip Enhancement Plugin - Tipitip

File Size: 7.08 KB
Views Total: 711
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Concise HTML5 Tooltip Enhancement Plugin - Tipitip

Tipitip is a small, flexible, customizable jQuery tooltip plugin that is easy to implement using data attributes without writing any JavaScript/CSS codes.

The tooltip plugin supports any DOM elements and also works with the native title attribute.

How to use it:

1. To install the tooltip plugin, just include the following JavaScript & CSS files on the webpage and you're ready to go.

<link href="/path/to/tipitip.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/tipitip.js"></script>

2. Add the CSS class tipitip-trigger to the trigger element and define the tooltip content in the title or data-content attribute.

<a class="tipitip-trigger" title="Tooltip content in TITLE attribute">
  Tooltip content in TITLE attribute
</a>

<a class="tipitip-trigger" data-content="Tooltip content in DATA attribute">
  Tooltip content in DATA attribute
</a>

3. Customize the position of the tooltip. All possible position values:

  • north-west
  • north
  • north-east
  • west
  • east (default)
  • south-west
  • south
  • south-east
<a class="tipitip-trigger" 
   data-position="south-west"
   data-content="Tooltip content in DATA attribute">
   Tooltip content in DATA attribute
</a>

4. Make the tooltip always be visible when triggered.

<a class="tipitip-trigger" 
   data-stay-open="true"
   data-content="Tooltip content in DATA attribute">
   Tooltip content in DATA attribute
</a>

5. Make the tooltip be visible on page load.

<a class="tipitip-trigger" 
   data-onload="true"
   data-content="Tooltip content in DATA attribute">
   Tooltip content in DATA attribute
</a>

6. Customize the JavaScript events to open/close the tooltop.

<a class="tipitip-trigger" 
   data-open-event="focus"
   data-close-event="blur"
   data-content="Tooltip content in DATA attribute">
   Tooltip content in DATA attribute
</a>

7. Add an extra CSS class to the tooltip.

<a class="tipitip-trigger" 
   data-class="myClass"
   data-content="Tooltip content in DATA attribute">
   Tooltip content in DATA attribute
</a>

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