1 /////////////////////////////////////////////////////////////////////
2 //SkinnyTip 2.00 - Elliott Brueggeman - April 19, 2007
3 //JavaScript Popup Tooltip Library
4 //Project Homepage: http://www.ebrueggeman.com/skinnytip
5 //Documentation available on project homepage
6 ////////////////////////////////////////////////////////////////////
7 //Rights: Free for personal use and corporate use if sites
8 //include a link to the project homepage
9 //////////////////////////////////////////////////////////////////////
12 //Call mouse capture handler function on page load
15 //CUSTOM VARS - Initialized below
28 var v_content_padding;
34 var v_xcoordinate = 0;
35 var v_ycoordinate = 0;
40 function tooltip(displaytext, title, commands) {
41 //Reset variables for this tool tip
48 //Parse commands if any
49 parseCommands(commands);
53 v_layer=getLayer(v_divname);
56 if (!(v_layer=createDivContainer())) {
63 function init_tooltip() {
65 v_divname = 'tiplayer';
66 v_text = 'Default Text';
72 v_backcolor = '#f6f5ee';
73 v_bordercolor = '#88344b';
74 v_textcolor = '#000000';
75 v_titletextcolor = '#000000';
79 v_title_padding = '1px';
80 v_content_padding = '1px 3px';
82 v_fontface = 'Arial, Helvetica, Sans-Serif';
91 function parseCommands(commands) {
92 if (commands != null) {
93 var comArray = commands.split(',');
94 for (var i = 0; i < comArray.length; i++) {
95 var args = comArray[i].split(':');
96 eval('v_' + trimWhitespace(args[0]) + '="' + trimWhitespace(args[1]) + '"');
101 // Clears popups if appropriate
103 if (v_visible == 1) {
104 if (v_layer != null) {
105 v_layer.style.visibility = 'hidden';
112 function mainMethod() {
115 var html = makeHTML(v_text, v_title);
118 //if we have mouse coordinates, position layer and make visible
119 if (v_havemouse == 1) {
122 v_layer.style.visibility = 'visible';
126 function makeHTML(text, title) {
128 var container_style = 'width:' + v_width + 'px;';
129 container_style += 'border:' + v_border + 'px solid ' + v_bordercolor + ';';
130 container_style += 'background-color:' + v_backcolor + ';';
131 container_style += 'font-family:' + v_fontface + ';';
132 container_style += 'font-size:' + v_fontsize + 'px;';
134 var title_style = 'background-color:' + v_bordercolor + ';';
135 title_style += 'padding:' + v_title_padding + ';';
136 title_style += 'color:' + v_titletextcolor + ';';
138 var content_style = 'padding:' + v_content_padding + ';';
139 content_style += 'color:' + v_textcolor + ';';
141 var txt = '<div id="skinnytip_container" style="' + container_style + '">';
142 if (title!=null && title.length>0) {
143 txt += '<div id="skinnytip_title" style="' + title_style + '">' + title + '</div>';
145 txt += '<div id="skinnytip_content" style="' + content_style + '">' + text + '</div>';
151 //Positions popup according to mouse input
152 function positionLayer() {
157 //get final placement
158 placeX = horizontalPlacement();
159 placeY = verticalPlacement();
162 v_layer.style.left = placeX + 'px';
163 v_layer.style.top = placeY + 'px';
166 //called when the mouse moves
167 //sets mouse related variables
168 function mouseMoveHandler(e) {
173 //if there is an x pos property
175 v_xcoordinate = mouseX(e);
176 v_ycoordinate = mouseY(e);
179 if (v_visible == 1) {
184 //get mouse x coordinate
185 function mouseX(evt) {
186 if (evt.pageX) return evt.pageX;
187 else if (evt.clientX) {
188 return evt.clientX + (document.documentElement.scrollLeft ?
189 document.documentElement.scrollLeft :
190 document.body.scrollLeft);
197 //get mouse y coordinate
198 function mouseY(evt) {
202 else if (evt.clientY) {
203 return evt.clientY + (document.documentElement.scrollTop ?
204 document.documentElement.scrollTop :
205 document.body.scrollTop);
213 function captureMouse() {
214 document.onmousemove = mouseMoveHandler;
218 function createPopup(input) {
220 var popupwidth = v_width;
224 text = createBackLayer(popupwidth,zindex++);
225 text += '<div style="position: absolute; top: 0; left: 0; width: ' + popupwidth + 'px; z-index: ' + zindex + ';">' + input + '</div>';
227 if (typeof v_layer.innerHTML != 'undefined') {
228 v_layer.innerHTML = text;
231 //After writing html measure height of backlayer to set height of iframe
232 var backlayer=self.document.getElementById("backdrop");
233 var container=self.document.getElementById("skinnytip_container");
234 backlayer.height = container.offsetHeight;
237 //Back layer prevents forms from showing through popups
238 function createBackLayer(width, Z) {
239 //Create backdrop with 0 height
240 return '<iframe id="backdrop" frameborder="0" scrolling="no" width="' + width + '" height="0" style="z-index: ' + Z + '; filter: Beta(Style=0,Opacity=0);"><p></iframe>';
243 //get horizontal box placement
244 function horizontalPlacement() {
245 placeX = v_xcoordinate + v_xoffset;
249 //get vertical box placement
250 function verticalPlacement() {
251 return v_ycoordinate + v_yoffset;
254 // create the div container for popup content if it doesn't exist
255 function createDivContainer() {
256 var divContainer = self.document.getElementById(v_divname);
260 function trimWhitespace(str) {
261 while(str.charAt(0) == (" ") ) {
262 str = str.substring(1);
264 while(str.charAt(str.length-1) == " " ) {
265 str = str.substring(0,str.length-1);