satya - Thursday, June 23, 2011 10:25:22 AM

Features yet to be supported


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

satya - Thursday, June 23, 2011 12:52:34 PM

what files do you need to make this work


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

jquery.tooltip.js
jquery.tooltip.css

satya - Thursday, June 23, 2011 12:54:03 PM

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.

satya - Thursday, June 23, 2011 12:56:08 PM

My Goal with this


<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.

satya - Thursday, June 23, 2011 2:18:45 PM

Here is how i have used the jquery tooltip to do this need


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);
    }
}

satya - Thursday, June 23, 2011 2:19:31 PM

ofcourse somone has to call this method


$(document).ready(hover_setup);

satya - Thursday, June 23, 2011 2:20:06 PM

emptyAction() to disable the mouse click on links


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

function emptyAction()
{
    return false;
}

satya - Thursday, June 23, 2011 2:20:37 PM

Here is an array to cache server side url content


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

satya - Thursday, June 23, 2011 2:21:32 PM

getUrlContent() callback: Here is how to get the server side content


//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;
}

satya - Thursday, June 23, 2011 2:22:52 PM

Ofcourse to be good js citizen encapsulate all of this in


(function($) {

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

})(jQuery);

satya - Thursday, June 23, 2011 2:23:56 PM

You can extend the idea for inline content on the same page

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.

satya - Thursday, June 23, 2011 2:27:16 PM

inline tooltip content example


<!--
*******************************************************
* 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>

satya - Thursday, June 23, 2011 2:29:19 PM

here is some supproting css file that I have created


/*
********************************
* 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;
}

satya - Thursday, June 23, 2011 2:31:42 PM

You can download testable code from here

satya - Thursday, June 23, 2011 2:33:23 PM

where to go next

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.

satya - Thursday, June 23, 2011 2:58:29 PM

well ofcourse this dosent seem to work in firefox :(

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

satya - Thursday, June 23, 2011 2:59:39 PM

firefox $.ajax asynch flag

Search for: firefox $.ajax asynch flag

satya - Thursday, June 23, 2011 3:09:42 PM

jquery ajax reference page

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