Log in

View Full Version : Understanding how does a tooltip using jquery works


Wisdom
09-08-2010, 08:06 PM
Hello,

I have found on the internet a really cool tooltip (not from dynamicdrive)

Where I found it they dind't give any explanation about how to use it for newbies like me..

First code:


/**
*
* simpleTooltip jQuery plugin, by Marius ILIE
* visit *** for details
*
**/
(function($){ $.fn.simpletooltip = function(){
return this.each(function() {
var text = $(this).attr("title");
$(this).attr("title", "");
if(text != undefined) {
$(this).hover(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
$(this).attr("title", "");
$("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");
if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
else var tipWidth = $("#simpleTooltip").width()
$("#simpleTooltip").width(tipWidth);
$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
}, function(){
$("#simpleTooltip").remove();
$(this).attr("title", text);
});
$(this).mousemove(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
var tipWidth = $("#simpleTooltip").outerWidth(true);
var tipHeight = $("#simpleTooltip").outerHeight(true);
if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
});
}
});
}})(jQuery);

Second:


$(document).ready(function(){
$(".with-tooltip").simpletooltip();
});

Read me:


Usage instructions

- if the element has a TITLE attribute:
$("#some-element").simpletooltip();

I really don't understand :( how does it apply on a text, image etc.?
azoomer
09-08-2010, 10:15 PM
This is a simple way to set it up:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tooltip</title>
<link href="simpletooltip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tooltip.v.1.1.js"></script>
<script type="text/javascript" src="jquery.tooltip.execute.js"></script>
</head>
<body>
<a href="#" title="This is the tooltip!" class="with-tooltip">Display tooltip on mouseover</a>
</body>
</html>

here is a DEMO (http://azoomer.com/jquery.simpletooltip.v.1.1/indexx.html)
Wisdom
09-09-2010, 11:04 AM
Thank you azoomer :D

I don't really understand why shoud I upload the .css file, works fine with <style> tag
azoomer
09-09-2010, 02:15 PM
Yes, on page styles will also work just as well
bluewalrus
09-09-2010, 02:30 PM
The linking of css is better because if you decide to change the style later you will have to edit each page manually. With the linked method you only have to edit that css file. Using the <style> tag in the head is the same, it's about the same as using the style attribute inline though.
Wisdom
09-09-2010, 04:39 PM
Ok, I understand now :)