|
0
|
1 /*
|
|
|
2 * This script was created by Erik Arvidsson (erik(at)eae.net)
|
|
|
3 * for WebFX (http://webfx.eae.net)
|
|
|
4 * Copyright 2001
|
|
|
5 *
|
|
|
6 * For usage see license at http://webfx.eae.net/license.html
|
|
|
7 *
|
|
|
8 * Version: 1.0
|
|
|
9 * Created: 2001-09-27
* Updated: 2001-11-25 Added a resize to the tooltip if the document width is too small
|
|
|
10 *
|
|
|
11 * Dependencies: helptip.css (To set up the CSS of the help-tooltip class)
|
|
|
12 *
|
|
|
13 * Usage:
|
|
|
14 *
|
|
|
15 * <script type="text/javascript" src="helptip.js"></script>
|
|
|
16 * <link type="text/css" rel="StyleSheet" href="helptip.css" />
|
|
|
17 *
|
|
|
18 * <a class="helpLink" href="?" onclick="showHelp(event, 'String to show'); return false">Help</a>
|
|
|
19 *
|
|
|
20 */
|
|
|
21
|
|
|
22 function showHelpTip(e, s) {
|
|
|
23 // find anchor element
|
|
|
24 var el = e.target ? e.target : e.srcElement;
|
|
|
25 while (el.tagName != "A")
|
|
|
26 el = el.parentNode;
|
|
|
27
|
|
|
28 // is there already a tooltip? If so, remove it
|
|
|
29 if (el._helpTip) {
|
|
|
30 document.body.removeChild(el._helpTip);
|
|
|
31 el._helpTip = null;
|
|
|
32 el.onblur = null;
|
|
|
33 return;
|
|
|
34 }
|
|
|
35
|
|
|
36 // create element and insert last into the body
|
|
|
37 var d = document.createElement("DIV");
|
|
|
38 d.className = "help-tooltip";
|
|
|
39 document.body.appendChild(d);
|
|
|
40 d.innerHTML = s;
|
|
|
41
|
|
|
42 // Allow clicks on A elements inside tooltip
|
|
|
43 d.onmousedown = function (e) {
|
|
|
44 if (!e) e = event;
|
|
|
45 var t = e.target ? e.target : e.srcElement;
|
|
|
46 while (t.tagName != "A" && t != d)
|
|
|
47 t = t.parentNode;
|
|
|
48 if (t == d) return;
|
|
|
49
|
|
|
50 el._onblur = el.onblur;
|
|
|
51 el.onblur = null;
|
|
|
52 };
|
|
|
53 d.onmouseup = function () {
|
|
|
54 el.onblur = el._onblur;
|
|
|
55 el.focus();
|
|
|
56 };
|
|
|
57
|
|
|
58 // position tooltip
|
|
|
59 var dw = document.width ? document.width : document.documentElement.offsetWidth - 25;
|
|
|
60 if (d.offsetWidth >= dw)
|
|
|
61 d.style.width = dw - 10 + "px";
else
|
|
|
62 d.style.width = "";
|
|
|
63 var scroll = getScroll();
|
|
|
64 if (e.clientX > dw - d.offsetWidth)
|
|
|
65 d.style.left = dw - d.offsetWidth + scroll.x + "px";
|
|
|
66 else
|
|
|
67 d.style.left = e.clientX - 2 + scroll.x + "px";
|
|
|
68 d.style.top = e.clientY + 18 + scroll.y + "px";
|
|
|
69
|
|
|
70 // add a listener to the blur event. When blurred remove tooltip and restore anchor
|
|
|
71 el.onblur = function () {
|
|
|
72 document.body.removeChild(d);
|
|
|
73 el.onblur = null;
|
|
|
74 el._helpTip = null;
|
|
|
75 };
|
|
|
76
|
|
|
77 // store a reference to the tooltip div
|
|
|
78 el._helpTip = d;
|
|
|
79 }
|
|
|
80
|
|
|
81 // returns the scroll left and top for the browser viewport.
|
|
|
82 function getScroll() {
|
|
|
83 if (document.all && document.body.scrollTop != undefined) { // IE model
|
|
|
84 var ieBox = document.compatMode != "CSS1Compat";
|
|
|
85 var cont = ieBox ? document.body : document.documentElement;
|
|
|
86 return {x : cont.scrollLeft, y : cont.scrollTop};
|
|
|
87 }
|
|
|
88 else {
|
|
|
89 return {x : window.pageXOffset, y : window.pageYOffset};
|
|
|
90 }
|
|
|
91 } |
