jQuery Multi-Function Tooltip Plugin - tooltipPlus

File Size: 30.9KB
Views Total: 1139
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Multi-Function Tooltip Plugin - tooltipPlus

tooltipPlus is a lightweight (~3k minified) and "Multi-Function" tooltip plugin which can be used for creating normal tooltips, mouseover effects or custom select element controls. 

How to use (Using Simple tooltip as an example):

1. Include necessary files in your head tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="jquery.tooltipPlusBT.min.js"></script>

2. Markup

<a id="simplett" class="http://www.jQueryScript.Net">Free jQuery Plugins and Tutorials</a>

3. Call the Plugin

<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function() {
    $('#simplett').tooltipPlus({ 
        "type":"tooltip", 
	"html": "Free jQuery Plugins and Tutorials", 
	"classNm":"green"
    });
});
</script>

4. Style the tooltip with CSS

.green {
background-image: url('../media/images/greenbutton.png');
width: 140px;
height: 12px;
padding: 5px;
border: 1px solid gray;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: #020202;
}

More Examples:


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