Simple jQuery Tooltip Plugin - wTooltip
File Size: | 58.7KB |
---|---|
Views Total: | 937 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
wTooltip is yet another jQuery plugin that helps create tooltips for your web pages in many different styles as you wish.
Features:
- Animations support
- Html markups within tooltips support
- Highly customizable
Basic Usage:
1. Include jQuery library and wTooltip in the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="wTooltip.js"></script>
2. Style your tooltips
<link rel="Stylesheet" type="text/css" href="wTooltip.css" />
3. Markup
<div id="wTooltip2" class="hoverBox" title="Title from title attribute">hover me</div>
4. CSS for example
.hoverBox { display: inline-block; margin: 10px; padding: 10px 30px; border: solid #CACACA 1px; cursor: pointer; }
5. Call the plugin
<script type="text/javascript"> $("#wTooltip2").wTooltip({ timeToStop: 2000, theme: "blue" }); </script>
6. More Options
$('#ID').wTooltip({ position : 'default', // should the tooltip follow the mouse [default,mouse] timeToStop : null, // only works with position default - the time mouse has to stop before triggering display of tooltip theme : 'cream', // allow custom with #FFAACC opacity : 0.8, // opacity level title : null, // manually set title fadeIn : 0, // time before tooltip appears in milliseconds fadeOut : 0, // time before tooltip fades in milliseconds delayIn : 0, // time before tooltip displays in milliseconds delayOut : 0, // time before tooltip begins to dissapear in milliseconds width : null, // define a set width for the tooltip height : null, // define a set height for the tooltip offsetX : 8, // x offset of mouse position offsetY : 9, // y offset of mouse position html : true // title is inserted as HTML rather than text });
Change log:
v1.8.0 (2013-07-08)
- Updated mousestop to not use mousestop events
- fixed up demo for ie7
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.