jquery tooltip basis
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
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.
satya - Tuesday, June 28, 2011 2:57:22 PM
here is someone recommendign to use cluetip instead
satya - Tuesday, June 28, 2011 2:58:35 PM
cluetip jquery tooltip
cluetip jquery tooltip