3D Flipping Tooltip Plugin With jQuery And CSS3 - Tooltipler

Yet another jQuery tooltip plugin which uses CSS3 animations to create 3D flipping tooltips on any DOM elements when mouse hovers.

How to use it:

1. Load the required stylesheet jquery.toolltipler.css and JavaScript jquery.tooltipler.js into your webpage which has jQuery library installed.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="src/jquery.tooltipler.js"></script>
<link rel="stylesheet" href="src/jquery.toolltipler.css">

2. The plugin uses title attribute to specify the tooltip content.

<div title="Tooltip 1" rel="tooltipler">Element</div>

3. Initialize the tooltip plugin.

$( "[rel~=tooltipler]" ).tooltipler();

4. Apply your custom CSS class to the tooltip using tooltiplerclass attribute.

<div title="Tooltip 1" rel="tooltipler" tooltiplerclass="black">Element</div>

.tooltipler.black {
  color: #fff;
  background: #111;
  border: none;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.tooltipler.black:after {
  border-top: 10px solid #111;
}

---

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