Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 71 lines (58 sloc) 2.438 kb
ae2906b @jcleblanc init - sample code
authored
1 <!--
2 tooltip_popup.html
3 Tooltip With Popup
4
5 Created by Jonathan LeBlanc on 06/08/09.
6 Copyright (c) 2009 Yahoo! Inc. All rights reserved.
7
8 The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
9 -->
10
11 <div id="tooltip" style="display:none;position:absolute;background-color:#000;color:#fff;padding:10px;"></div>
12 <div style="position:relative; margin:50px;">
13 <div id="myContainer" style="position:absolute; top:50px; left:50px; border:1px solid #000; padding:10px; width:200px">Container</div>
14 </div>
15
16 <script type="text/javascript">
17 //assign mouse over handler to container
18 var myDiv = document.getElementById('myContainer');
19 if (myDiv.addEventListener) {
20 myDiv.addEventListener('mouseover', overCallback, false);
21 myDiv.addEventListener('mouseout', outCallback, false);
22 } else if (myDiv.attachEvent) {
23 myDiv.attachEvent('mouseover', overCallback);
24 myDiv.attachEvent('mouseout', outCallback);
25 }
26
27 //callback for mouseover - sender is the triggering event
28 function overCallback(sender){
29 var target;
30
31 // capture the object that the mouse over event was from
32 if (window.event) {
33 target = window.event.srcElement;
34 } else if (sender) {
35 target = sender.target;
36 } else { return; }
37
38 //get the top and left x / y coords of the target
39 var nodeTop = target.offsetTop;
40 var nodeLeft = target.offsetLeft;
41
42 //if the node is within a parent container, loop through each parent
43 //and add their height / width offsets to the top / left
44 nodeParent = target.offsetParent;
45 if (nodeParent != target) {
46 while (nodeParent) {
47 nodeLeft += nodeParent.offsetLeft;
48 nodeTop += nodeParent.offsetTop;
49 nodeParent = nodeParent.offsetParent;
50 }
51 }
52
53 //set tooltip data and display
54 var tooltip = document.getElementById('tooltip');
55 tooltip.innerHTML = "This is a tooltip";
56 tooltip.style.display = "block";
57
58 //set the tooltip top positioning to the same as the container moused over
59 tooltip.style.top = nodeTop + "px";
60
61 //set the tooltip left positioning to the end of the container moused over (left location + width of the container)
62 tooltip.style.left = (nodeLeft + target.offsetWidth) + "px";
63 }
64
65 //callback for mouseout
66 function outCallback(sender){
67 //hide the tooltip
68 document.getElementById('tooltip').style.display = "none";
69 }
70 </script>
Something went wrong with that request. Please try again.