Log in

View Full Version : Automatic Tool Tip on Certain Words on a Page



timbobelmo
01-21-2011, 04:24 PM
I'm looking for something that will put a tool tip (such as the kind found here: http://www.dynamicdrive.com/forums/showthread.php?t=38741 ... but for some reason this one isn't working on my server.)

Basically whenever the word "VLT" shows up on a page, I want a tooltip when you mouseover it to say "Visible Light Transmittance" .

Ideas? Thanks!

vwphillips
01-22-2011, 05:39 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

.wordcls {
color:red;
}

.wordcls2 {
color:green;font-Weight:bold;
}

.popup {
position:absolute;z-Index:101;width:100px;background-Color:#FFCC66;
}

.popup2 {
background-Color:#FFFFCC;
}

/*]]>*/
</style>

</head>

<body>
<div id='subjectMatter'>
<p>vlt It would be comforting to avoid March altogether, but 17 days remained. Today, the countdown ended for another anticipated event.</p>
<p>The guys are really good about clearing a path from her parking space to the main walkway. Still, it's embarrassing to motor into the library with wet, slushy wheels. Madeline's wheelchair tire tracks on the carpet always remind her that she is confined between those lines.</p>
<p>
She recalled when she felt trapped in the suburbs, on two energetic legs. Now, there was no difference between the size of the universe and the speck on the map she called home.
Davenport had its advantages. From the deck outside her living room she could look out over Lake Erie and play on the water. All that separated her from the 80 foot drop was the chin-high, weather-beaten railing. She was concerned about that, maybe, but never frightened. Only the rails were weak, not the 4x4 upright corner beams. Actually, it was exactly what she needed.</p>

<p>Boomerang-like winged gulls took turns passing over her, almost hovering in the breeze, as she tossed up a green grape for each to catch. When the fruit was gone they returned to swirl in a tall column above the lake. They wanted her to join in the games they played on the wind. Imagination provided beautiful wings!</p>

<p>
Davenport also had its disadvantages. VLT Madeline didn't have the stamina to drive an hour to visit the graves of her twins and husband. Her status as the only widow in a small town also meant that she had to contend with the almost daily unannounced visitor. Women presented baked goods or casseroles. Husbands and single men arrived with the various tools of their trade insisting that they fix this or that. They knew more about the condition of her house than she did. She turned down several offers to fix the deck railing.
</p>
<p>They were like a trail of worker ants beating a path to her door. The women wanted to gossip and pump her for personal information. The men, well-- a gorgeous, middle-aged widow in a wheelchair must surely want a man's companionship, right?
</p>
<p>Tom, the Chief of Police, was the only one who understood that everything below her waist was numb.</p>
<p>
There was ample opportunity to slip in that fact during one of the wives velvet interrogations. That's all it would have taken to stop the men from ringing her doorbell. They were disruptive to her life. They weren't very clever or good conversationalists. There was just so much one could say about the virtues of one power tool versus another. Yet, she didn't want them to stop coming. In a very real way, they afforded her a lot of protection. Evil doesn't ring the doorbell when it pays a visit.
</p>
<p>

Evil would certainly arrive someday, though. For that reason, she denied herself the warmth, stability and healing presence that Tom could be in her life. Madeline didn't know how, but Tom recognized and respected the line she drew. It's funny to have an understanding like that with someone; all of it communicated through the dialogue of perfectly timed and measured eye contact.
</p>
<p>The residents of Davenport were almost too kind, but Madeline never exploited them. She never asked someone to take her to the cemetery. She preferred gracious acceptance of whatever help was offered, instead of requesting assistance. All the shopkeepers were continuously learning how to accommodate her. There were no tourist attractions here. Nevertheless, it's hard to believe that she's the only one with round legs that any of these 7200 or so people have seen. She dearly hoped that after two years she finally fit in with her new neighbors and friends.</p>

If good news was ever going to arrive, it would be waiting inside today.
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Word PopUp (22-January-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


//****** Functional Code(2.95K) - NO NEED to Change.

function zxcWordPopUp(o){
var obj=document.getElementById(o.ID)||document.body,ary=[],z0=0,z0a,wary=o.WordArray,word,txt,pop,cs=typeof(o.CaseSensitive)!='boolean'||!o.CaseSensitive?false:true;
this.words(obj,ary);
for (;z0<wary.length;z0++){
for (z0a=0;z0a<ary.length;z0a++){
word=wary[z0][0];
txt=ary[z0a].innerHTML;
if (!cs){
word=word.toLowerCase();
txt=txt.toLowerCase();
}
if (word==txt){
ary[z0a].className=typeof(wary[z0][2])=='string'?wary[z0][2]:typeof(o.WordClassName)=='string'?o.WordClassName:'';
this.addevt(ary[z0a],'mousemove','popup',wary[z0]);
this.addevt(ary[z0a],'mouseout','hide');
}
}
}
this.to=null;
this.xos=typeof(o.XOffset)=='number'?o.XOffset:10;
this.yos=typeof(o.YOffset)=='number'?o.YOffset:-10;;
this.cls=typeof(o.PopUpClassName)=='string'?o.PopUpClassName+' ':'';
pop=document.createElement('DIV');
pop.style.visibility='hidden';
document.body.appendChild(pop);
this.popobj=pop;
}

zxcWordPopUp.prototype={

popup:function(ary,e){
var mse=this.mse(e),pop=this.popobj,xos=ary[4]||this.xos,yos=ary[5]||this.yos,wwhs=this.wwhs();
clearTimeout(this.to);
pop.innerHTML=ary[1];
pop.className=this.cls+(ary[3]?ary[3]:'');
pop.style.visibility='visible';
pop.style.left=Math.min(Math.max(mse[0]+xos,wwhs[2]+5),wwhs[0]+wwhs[2]-pop.offsetWidth-5)+'px';
pop.style.top=Math.min(Math.max(mse[1]+yos,wwhs[3]+5),wwhs[1]+wwhs[3]-pop.offsetHeight-5)+'px';
},

hide:function(){
var oop=this;
this.to=setTimeout(function(){ oop.popobj.style.visibility='hidden'; },500);
},

words:function(n,ary){
for(var nu=n.childNodes.length,txt,rn,s,nn,z0a,z0=0;z0<nu;z0++){
txt=n.firstChild.data;
rn=n.removeChild(n.firstChild);
if(rn.nodeType==3){
var s=txt.split(' ');
for(z0a=0;z0a<s.length;z0a++) {
nn=document.createElement('A');
ary.push(nn);
nn.appendChild(document.createTextNode(s[z0a]));
n.appendChild(nn);
n.appendChild(document.createTextNode(' '));
}
}
else {
this.words(rn,ary);
n.appendChild(rn);
}
}
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},

mse:function(e){
if (document.all){
return [e.clientX+this.wwhs()[2],e.clientY+this.wwhs()[3]];
}
return [e.pageX,e.pageY];
},

wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}


}

new zxcWordPopUp({
WordArray:[// an array defining the words, popup innerHTML, popup class name and offsets. (array)
// field 0 = the word to activate the pop up. (string)
// field 1 = the innerHTML of the the pop up. (string)
// field 2 = (optional) the class name of the word. (string, default = default = WordClassName)
// field 3 = (optional) the class name of the popup. (string, default = default = PopUpClassName)
// field 4 = (optional) X offset of the pop up. (number, default = default = XOffset )
// field 5 = (optional) X offset of the pop up. (number, default = default = YOffset )
['VLT','Visible Light Transmittance'],
['avoid','Some Text','wordcls2','popup2',-50,1]
],
ID:'subjectMatter', //(optional) the unique ID name of the words parent node. (string, default = the document body)
WordClassName:'wordcls', //(optional) the class name of the popup words. (string, default = no class name)
XOffset:20, //(optional) the popup X offset from the mouse position. (number, default = 10)
YOffset:-20, //(optional) the popup Y offset from the mouse position. (number, default = -10)
CaseSensitive:false, //(optional) are the words case sensitive. (boolean, default = false)
PopUpClassName:'popup' //(optional) the popup class name. (string, default = WordArray class name)
});
/*]]>*/
</script>
</body>

</html>