e8330e349f899271c5c737d7f19b088206fa596a
[jquery.git] / tooltip.js
1 /*
2 Description:
3
4         jQuery ToolTip Demo. Demo of how to add elements and get mouse coordinates
5         There is also a ToolTip plugin found at http://www.eyecon.ro/interface/,
6           which uses a CSS class to style the tooltip, but shows it below the input/anchor, rather than where the mouse is
7
8 Usage:
9
10         $(window).load(
11                 function()
12                 {
13                         $("a,input").ToolTipDemo('#fff');
14                 }
15         );
16
17 Parameters:
18
19         bgcolour : Background colour
20 */
21 $.fn.ToolTipDemo = function(bgcolour)
22 {
23         this.mouseover(
24                 function(e)
25                 {
26                         if((!this.title && !this.alt) && !this.tooltipset) return;
27                         // get mouse coordinates
28                         // based on code from http://www.quirksmode.org/js/events_properties.html
29                         var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft : 0);
30                         var mouseY = e.pageY || (e.clientY ? e.clientY + document.body.scrollTop : 0);
31                         mouseX += 10;
32                         mouseY += 10;
33                         bgcolour = bgcolour || "#eee";
34                         // if there is no sibling after this one, or the next siblings className is not tooltipdemo
35                         if(!this.nextSibling || this.nextSibling.className != "tooltipdemo")
36                         {
37                                 // create a div and style it
38                                 var div = document.createElement("div");
39                                 $(div).css(
40                                 {
41                                         border: "2px outset #ddd",
42                                         padding: "2px",
43                                         backgroundColor: bgcolour,
44                                         position: "absolute"
45                                 })
46                                 // add the title/alt attribute to it
47                                 .html((this.title || this.alt)).addClass("tooltipdemo");
48                                 this.title = "";
49                                 this.alt = "";
50                                 if(this.nextSibling)
51                                 {
52                                         this.parentNode.insertBefore(div, this.nextSibling);
53                                 }
54                                 else
55                                 {
56                                         this.parentNode.appendChild(div);
57                                 }
58                                 this.tooltipset = true;
59                         }
60                         $(this.nextSibling).show().css({left: mouseX + "px", top: mouseY + 3 + "px"});
61                 }
62         ).mouseout(
63                 function()
64                 {
65                         if(this.nextSibling && this.nextSibling.className == "tooltipdemo")
66                         {
67                                 $(this.nextSibling).hide();
68                         }
69                 }
70         );
71         return this;
72 }