jquery tooltip basis

jquery tooltip basis

Tooltip home page


leverage advanced background-styling, 
  eg. see http://www.google.com/intl/en_ALL/mapfiles/iw2.png
add ability to display remote tooltip for other elements, 
  eg. an invalid input
Add stop-queue stuff for fadein/out without nasty queues
add delay on hide
add stick on hover of tooltip (with track:false)
offer hoverIntent support


jquery.js
jquery.dimensions.js
jquery.bgiframe.js

jquery.tooltip.js
jquery.tooltip.css


#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }

Clearly the tooltip plugin uses #tooltip as the div id of the tooltip. You can change this through tooltip options documented in the documentation. 


<div class="hover_element borderdiv" 
href="someserveride-url"
>
<p>You should be able to hover on this</p>
</div>

If I mark an html element with class name "hover_element" it should look or href on that node and get its content from serverside and populate the tip content. 


function hover_setup()
{
    //Get every element with the specified class
    var elementArray = $(".hover_element");
    
    //for each matching html element
    //Call tooltip by passing a callback function
    for(i=0; i<elementArray.length; i++)
    {
        var element = elementArray[i];
        //See if the element has href
        var href = $(element).attr("href");
        
        //setup tooltip with a callback
        $(element).tooltip(
        {
           bodyHandler:getUrlContent,
           showURL:false,
           extraClass: "hover"
        });
        
        //Disable click on the html element
        //to prevent such as an html link
        $(element).click(emptyAction);
    }
}


$(document).ready(hover_setup);


//Here are the callback functions
//Let's see empty action first

function emptyAction()
{
    return false;
}


//an array to cache url content that is
//already obtained.
var urlContentArray = new Array();


//Here is the content callback
//It retreives html from serverside
//using jquery ajax

function getUrlContent(href)
{
    //See if the content is already cached
    var content = urlContentArray[href];
    if (content != null)
    {
        //content is located in the cache
        return content;
    }
    //content is not in the cache
    //use ajax to get it
    var s = $.ajax({ 
      url: href, 
      async: false 
     }).responseText;
     
     //put it in the cache
     urlContentArray[href]=s;
     return s;
}


(function($) {

.....
your javascript
.....

})(jQuery);

You can extend the idea for inline content on the same page instead of going back to the server. what follows is an example html to demonstrate this. 


<!--
*******************************************************
* Have your href point to div id
* put this div id in href with a # sign before it
* The leadign # sign can be recognized and retrieve that
* content from the corresponding div
*******************************************************
-->
<div class="hover_element borderdiv" 
href="#testdivid"
>
<p>You should be able to hover on this and see 
the hidden div's content.
</p>
</div>


<!--
*******************************************************
* the hover-inline class can be used to hide the div
* content.
*
* The div id matches with the href spec on the above div.
*******************************************************
-->

<div id="testdivid" class="hover-inline">
<p>This is a hidden test div content
</p>
</div>


/*
********************************
* This is the style for the hover div
* created by jquery tooltip.
*
* This class is indicated in the 
* extraClass option of jquery tooltip. 
********************************
*/ 
#tooltip.hover
{
   background:red;
   margin:10px;
   border:solid navy 5px;
}


/*
************************************************
* This style indicates that this html element
* such as div, a, will induce hover.
* 
* we will visually indicate to the user
* through a pointer for a hover clue
************************************************
*/ 
.hover_element
{
  cursor:pointer;
}

/*
************************************************
* This style is used for inline hover content
* A div with this class can hold the hover content.
* Such a div is hidden.
* when a correspondign hover element is hovered on
* This content is given to the tooltip as the hover
* content.
************************************************
*/ 
.hover-inline
{
	display:none;
	visibility:hidden;
}

/*
************************************************
* This is a test style
* Can be removed.
*
* This is used to draw attention to a div
* or an html element that we are going to 
* hover on it by enclosing it in a box look.
************************************************
*/ 
.borderdiv
{
   margin:10px;
   border:solid navy 5px;
}

You can download testable code from here

The tooltip plugin has lot more features to play with. You can see those on the home page of the plugin, which is indicated at the begining of this document.

ajax doesnt seem to wait although i have set the async flag to false.

firefox $.ajax asynch flag

Search for: firefox $.ajax asynch flag

jquery ajax reference page

cross domain requests do not support synchronous. So are jsonp data types. Also this could hold the browser up.

here is someone recommendign to use cluetip instead

cluetip jquery tooltip

Search for: cluetip jquery tooltip