jHelperTip 1.0 - The Multi-Use Tooltip for jQuery

jHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object. 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 Special Case jHelperTipClose : clicking on any element that has this class will make the current tooltip close ExamplesjQuery.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>
Digg for me if you like the story. These icons link to social bookmarking sites where readers can share and discover new web pages. });
</script>

<div id="myController">
<span class="jFlowControl">No 1 </span>
<span class="jFlowControl">No 2 </span>
<span class="jFlowControl">No 3 </span>
<span class="jFlowControl">No 4 </span>
</div>

<div id="mySlides">
<div>First Slide</div>
<div>Second Slide </div>
<div>Third Slide </div>
<div>Fourth Slide </div>
</div>

<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span> Download
Demo