This time I will share jQuery Plugin and tutorial about 3D Flipping Tooltip Plugin With jQuery And CSS3 – Tooltipler, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script> |
2 |
<script src="src/jquery.tooltipler.js"></script> |
3 |
<link rel="stylesheet" href="src/jquery.toolltipler.css"> |
2. The plugin uses title attribute to specify the tooltip content.
3. Initialize the tooltip plugin.
1 |
$( "[rel~=tooltipler]" ).tooltipler(); |
4. Apply your custom CSS class to the tooltip using tooltiplerclass attribute.
1 |
<div title="Tooltip 1" rel="tooltipler" tooltiplerclass="black">Element</div> |
05 |
-webkit-border-radius: 5px; |
09 |
.tooltipler.black:after { |
10 |
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.
