Easy Animated Tooltip Plugin For jQuery - TtT
File Size: | 11.9 KB |
---|---|
Views Total: | 1287 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery tooltip plugin for attaching highly customizable tooltips to any DOM elements with fadeIn / fadeOut effects based on jQuery animations.
Basic usage:
1. Add jQuery JavaScript library and the jQuery TtT plugin to your web pages.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="Title.to.Tooltip.js"></script>
2. Create a tooltip from title
attribute of your element.
<div id="demo" title="Hello World">Mouse Over Me</div>
$("#demo").addTtT();
3. Set tooltip content in the JavaScript
<div id="demo" title="Hello World">Mouse Over Me</div>
$("#demo").addTtT({text : "Hello World!"});
4. Create a tooltip programmably.
<div id="demo" title="Hello World">Mouse Over Me</div>
$("#demo").addTtT({ text : function(){ var dt = new Date(); return "The time is\r\n" + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); } });
5. Add your own CSS styles to the tooltips.
.TtT { position: absolute; max-width: 300px; padding: 20px; border: 1px lightgrey solid; border-radius: 5px; background-color: white; margin-top: -10px; pointer-events: none; } .TtTpointer { position: absolute; border-style: solid; border-width: 10px; margin: -20px 0 0 0; border-color: transparent transparent white transparent; pointer-events: none; }
6. Full customization options with default values.
$("#demo").addTtT({ // fadeIn / fadeOut animation speed fadeTime: 500, // the attribute name to draw the tooltip from attrName: "title", // If true, the existing attribute will be removed after its value has been captured. removeAttr: true, // CSS class for tooltips className : "TtT" , // delay delay: 500, // the delay (in milliseconds) before a tooltip is displayed drawPointer: false , // The class name to apply to the pointer. pointerClassName: "TtTpointer", // If true, a styleable element will be drawn at the top of the tooltip drawPointer: false, // tooltip text/function text: '' });
This awesome jQuery plugin is developed by PacmanBits. For more Advanced Usages, please check the demo page or visit the official website.