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:

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:

Code:

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

Read me:

Code:

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:

Code:

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

**Wisdom** · 09-09-2010, 11:04 AM

Thank you azoomer

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

Thread: Understanding how does a tooltip using jquery works

Thread Tools

Search Thread

Understanding how does a tooltip using jquery works

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions