jQuery Multi-Use Tooltip jHelperTip 1.0

Download
Demo

The API and Default Values

$.fn.jHelperTip.defaults = {
 trigger: "click",
 topOff: 3,
 leftOff: 10,
 source: "container",
 attrName: '',
 ttC: "#jHelperTipContainer", /* tooltip Container*/
 dC: "#jHelperTipDataContainer", /* data Container */
 aC: "#jHelperTipAttrContainer", /* attr Container */
 opacity:  1.0,
 loadingImg: "ajax-loader.gif",
 loadingText: "Loading...",
 type: "GET", /* data can be inline or CSS selector */
 //url: '',
 //data: '',
 autoClose: true
};

Explanation of the Options:

• trigger: "click" or "hover" to trigger the tooltip
• topOff: top offset from mouse pointer
• leftOff: left offset from mouse pointer
• source: can be "container", "ajax" or "attribute", container is an container in current page, ajax loads from another page, attribute will read the attribute of current object.
• attrName: the attribute that you want to pass the data from (only works if your source is attribute)
• ttC: tooltip container (define a container to position your tooltip and receive data from ajax), will create if container not found use "#container" and not "container"
• dC: data container for same page container (only works if your source is container)
• aC: attribute data container (only works if your source is attribute)
• opacity: opacity of the tooltips
• loadingImg: the loading image indicator in Ajax calls (only works if your source is ajax)
• loadingText: the loading text indicator in Ajax calls (only works if your source is ajax)
• type: "GET" or "POST" (only works if your source is ajax)
• url: The address of the page that you are fetching from (only works if your source is ajax)
• data: data passed to the ajax request (only works if your source is ajax)
• autoClose: true or false, specify if explicit action is needed to close the tooltip

jHelperTipClose : clicking on any element that has this class will make the current tooltip close

Examples

jQuery.noConflict();

jQuery(function($){
   $("#test").jHelperTip({
     trigger: "click",
     dC:"#tip1",
     autoClose: false,
     opacity: 0.9
 });

<div>Matt is doing something <span id="test">dangerous</span></div>

<div id="tip1" style="display:none">
 <div class="jHelperTipClose" style="cursor:pointer;color:#F00">click here to close</div>
 <p>adj.</p>
 <p>1. Involving or filled with danger; perilous.</p>
 <p> 2. Being able or likely to do harm.</p>
</div>

Download
Demo