PDA

View Full Version : New tooltip

shlagish
06-26-2004, 06:36 AM
I made a tooltip script unlike any I have every seen, so I decided to post it here. Comments and questions are welcome.

Features:
Tooltip appears onmouseover and dissapears onmouseout.
Works in IE, Firebird and probably other browsers too :)
When you want a word to have a tooltip, you simply surround the word with ":" ex: :word:
Then you go in the javascript and add that word to the words[] array
ex: words["rabbit","frog","newWords"]

The you add the tooltip text in the desc[] array
ex: desc["newWord"]="<table><tr><td>may contain</td><td>may not contain</td></tr><tr><td>any html</td><td>carriage returns...</td>";

here is the code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />

<title>Tooltip</title>

<style type="text/css">
<!--
#right { text-align: right; }
#center { text-align: center; }
#wordMeaning { background: #FF9;
border: 1px solid #000;
min-width: 250px;
position: absolute;
display: none;
}
#wordMeaning h1 { background: #CC0;
border: 1px solid #000;
font-size: 1.2em;
margin: 0;
padding: 0 .3em;
}
#wordMeaning div { padding: .5em; }
.Glossary { cursor: pointer;
color: #F00;
text-decoration: underline;
}

-->
</style>
<script type="text/javascript">
<!--
var desc=new Array(),
mX,
mY,
words=["Rabbit","Frog",];

desc["Rabbit"]="<ol><li>Very prolific mammel which digs terriers in sandy and buchy terrains. <cite>The forest houses many animals such as <strong>rabbits</strong>.</cite></li><li>Very cuddly pet often given to children at birthdays or christmas. <cite>I bought you a nice <strong>rabbit</strong>!</cite></li></ol>";

desc["Frog"]="<ol><li>Very slimey animal which hops and makes noises. <cite>Look at that green <strong>Frog</strong>.</cite></li><li>adj. One can be froggish, I guess. <cite>Your such a <strong>Frog</strong>.</cite></li></ol>";


function closeMeaning(){

document.getElementById("wordMeaning").style.display="none";
}

function moveMeaning(){

var tooltip=document.getElementById("wordMeaning"),
Xpos=(mX<document.body.clientWidth-267)?mX+15:document.body.clientWidth-267,
Ypos=mY+20;

tooltip.style.top=Ypos+"px";
tooltip.style.left=Xpos+"px";
}

function getMeaning(word){

var tooltip=document.getElementById("wordMeaning"),
Xpos=(mX<document.body.clientWidth-267)?mX+15:document.body.clientWidth-267,
Ypos=mY+20;

tooltip.style.left=Xpos+"px";
tooltip.style.top=Ypos+"px";
tooltip.style.display="block";
tooltip.innerHTML="<h1>"+word+"</h1>"+desc[word];
}

function getMousePos(e){

mX=(document.all)?event.offsetX:e.clientX+window.scrollX;
mY=(document.all)?event.offsetY:e.clientY+window.scrollY;
}

function makeTooled(){

var theHTML=document.body.innerHTML, i;

for(i=0;i<words.length;++i){
theHTML = theHTML.replace(new RegExp(":"+words[i]+":","gi"),'<span class="Glossary" onmouseover="getMeaning(\''+words[i]+'\');" onmousemove="moveMeaning();" onmouseout="closeMeaning();">'+words[i]+'</span>');
}
document.body.innerHTML=theHTML;
}


window.onload=makeTooled;
document.onmousemove=getMousePos;

//-->
</script>
</head>
<body>

<div id="wordMeaning"></div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>

<div id="right"><p>I like :RaBbit:s and :FroG:s. I like :rabbit:s and :frog:s. I like :rabbit:s and :frog:s.</p></div>
<div id="center"><p>I like :Rabbit:s and :Frog:s.</p></div>
<div><p>I like :Rabbit:s and :Frog:s, hate Frogs though.</p></div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>

</body>
</html>


Working example (http://www.angelfire.com/pro/shlagish/tooltip.html)
kwhubby
07-26-2004, 04:05 AM
Looks Nice, I like it :) A clever way to make words tooltips. I have never seen something like that with the colons converted to tooltip with javascript. I see that a lot in php with forum type code but interesting to use this in javascript to dynamically change those words into onmousover spans.
Garadon
07-26-2004, 08:27 AM
Nice enough I guess as long as the browser has javascript enabled, but I presume it would be quite an annoyance to read if it doesn't. But then I never advocate for the should work in all browsers :)
shlagish
07-29-2004, 03:55 AM
the people without javascript will see some words like :this:. That's all. not too bad :)
Willy Duitt
07-29-2004, 09:21 AM
the people without javascript will see some words like :this:. That's all. not too bad :)

Nice concept and interesting script shlagish. :thumbsup:

FWIW: I had a play at it trying to eleminate the need to wrap the tooltip words with special characters. The below works but I do not like that it also highlites punctuation along with the target word but that should not be too hard to fix by either fixing my goofy regular expression or running another check....


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />
<title>Tooltip</title>

<style type="text/css">
<!--
.Glossary { cursor: pointer;
color: #F00;
text-decoration: underline;
}

#wordMeaning div { padding: .5em;
}

#wordMeaning h1 { background: #CC0;
border: 1px solid #000;
font-size: 1.2em;
margin: 0;
padding: 0 .3em;
}

#wordMeaning { background: #FF9;
border: 1px solid #000;
min-width: 250px;
position: absolute;
display: none;
}
-->
</style>
<script type="text/javascript">
<!--//
var desc = [], words = ['Rabbit','Frog'], mX, mY;
desc['Rabbit'] = '<ol><li>Very prolific mammel which digs terriers in sandy and buchy terrains. <cite>The forest houses many animals such as <strong>rabbits</strong>.</cite></li><li>Very cuddly pet often given to children at birthdays or christmas. <cite>I bought you a nice <strong>rabbit</strong>!</cite></li></ol>';
desc['Frog'] = '<ol><li>Very slimey animal which hops and makes noises. <cite>Look at that green <strong>Frog</strong>.</cite></li><li>adj. One can be froggish, I guess. <cite>Your such a <strong>Frog</strong>.</cite></li></ol>';

function getMeaning(word){
var tooltip = document.getElementById('wordMeaning');
Xpos = (mX<document.body.clientWidth-267) ? mX+15 :
document.body.clientWidth-267, Ypos = mY+20;
tooltip.style.left = Xpos+'px';
tooltip.style.top = Ypos+'px';
tooltip.style.display = 'block';
tooltip.innerHTML = '<h1>'+word+'</h1>'+desc[word];
}

function moveMeaning(){
var tooltip = document.getElementById('wordMeaning');
Xpos = (mX<document.body.clientWidth-267) ? mX+15 :
document.body.clientWidth-267, Ypos = mY+20;
tooltip.style.top = Ypos+'px';
tooltip.style.left = Xpos+'px';
}

function closeMeaning(){
document.getElementById('wordMeaning').style.display = 'none';
}

function makeTooled(){
var tooltip = document.getElementById('wordMeaning');
var theHTML = document.body.innerHTML.split(/\s+/g);
for(var i=0;i<words.length;i++){
for(var j=0; j<theHTML.length; j++){
var re = new RegExp('^('+words[i]+'[s|.|,|!]{1}|'+words[i]+'$)','gi');
if(theHTML[j].match(re)){
var span = '<span class="Glossary"';
span+= 'onmousemove="moveMeaning()"';
span+= 'onmouseout="closeMeaning()"';
span+= 'onmouseover="getMeaning(\''+words[i]+'\')">';
span+= RegExp.$1+'</span>';
theHTML[j] = theHTML[j].replace(re,span)

}
}
} document.body.innerHTML = theHTML.join(' ');
}


function getMousePos(e){
mX = (document.all) ? event.offsetX : e.clientX+window.scrollX;
mY = (document.all) ? event.offsetY : e.clientY+window.scrollY;
}

window.onload = makeTooled;
document.onmousemove = getMousePos;
//-->
</script>
</head>


<body>
<div id="wordMeaning"></div>
<p>I like :RaBbit:s and :FroG:s. I like :rabbit:s and :frog:s. I like :rabbit:s and :frog:s.</p>
<p>I like :Rabbit:s and :Frog:s.</p>
<p>I like :Rabbit:s and :Frog:s, hate Frogs though.</p>
<p>I like RaBbit and FroG, I like rabbit and frog. I like rabbit and frog.</p>
<p>I like Rabbits and Frogs.</p></div>
<p>I like Rabbits and Frogs, hate Frogaliscious though.</p>
</body>
</html>


.....Willy
shlagish
07-30-2004, 04:21 AM
I'm not at home for now. But in two weeks I will be so I'll check it out then :)
hemebond
07-30-2004, 05:06 AM
I prefer pure css tooltips (http://www.madaboutstyle.com/tooltip2.html) myself.
shlagish
08-06-2004, 11:01 PM
I normally do to. but my way allows my html not to be full of crap (pardon the expression). PLus, the real advantage I was looking for, the tooltip follows the mouse.
shlagish
09-13-2004, 03:45 AM
Hey Willy!
I finaly got around to checking out your try at my script. Interesting, but as you say, punctuation remains...
jbot
09-13-2004, 03:12 PM
it would be quite cool to combine this script with the HTMLOverlays discussed in another post. wotcha think?
Willy Duitt
09-13-2004, 03:18 PM
Hey Willy!
I finaly got around to checking out your try at my script. Interesting, but as you say, punctuation remains...

As I mentioned... It should not be too hard to fix with a little more work to the regular expression....
GeForce
09-14-2004, 10:52 AM
Hi shlagish,

Would it be OK if I post this script so it is available for download on my website?

Please see the site at www.livescripts.net

Thanks,

Jon :cool:
shlagish
09-22-2004, 03:43 AM
no problem GeForce :)
Here it is :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />

<title>Tooltip</title>

<style type="text/css">
<!--
body { background-color: #555; }
#right { text-align: right; }
#center { text-align: center; }
#wordMeaning { background: #FF9;
border: 1px solid #000;
min-width: 250px;
position: absolute;
display: none;
}
#wordMeaning h1 { background: #CC0;
border: 1px solid #000;
font-size: 1.2em;
margin: 0;
padding: 0 .3em;
}
#wordMeaning div { padding: .5em; }
.Glossary { cursor: pointer;
color: #F00;
text-decoration: underline;
}

-->
</style>
<script type="text/javascript">
<!--
var desc=new Array(),
mX,
mY,
words=["Rabbit","Frog",];

desc["Rabbit"]="<ol><li>Very prolific mammel which digs terriers in sandy and buchy terrains. <cite>The forest houses many animals such as <strong>rabbits</strong>.</cite></li><li>Very cuddly pet often given to children at birthdays or christmas. <cite>I bought you a nice <strong>rabbit</strong>!</cite></li></ol>";

desc["Frog"]="<ol><li>Very slimey animal which hops and makes noises. <cite>Look at that green <strong>Frog</strong>.</cite></li><li>adj. One can be froggish, I guess. <cite>Your such a <strong>Frog</strong>.</cite></li></ol>";


function closeMeaning(){

document.getElementById("wordMeaning").style.display="none";
}

function moveMeaning(){

var tooltip=document.getElementById("wordMeaning"),
Xpos=(mX<document.body.clientWidth-267)?mX+15:document.body.clientWidth-267,
Ypos=mY+20;

tooltip.style.top=Ypos+"px";
tooltip.style.left=Xpos+"px";
}

function getMeaning(word){

var tooltip=document.getElementById("wordMeaning"),
Xpos=(mX<document.body.clientWidth-267)?mX+15:document.body.clientWidth-267,
Ypos=mY+20;

tooltip.style.left=Xpos+"px";
tooltip.style.top=Ypos+"px";
tooltip.style.display="block";
tooltip.innerHTML="<h1>"+word+"</h1>"+desc[word];
}

function getMousePos(e){

mX=(document.all)?event.offsetX:e.clientX+window.scrollX;
mY=(document.all)?event.offsetY:e.clientY+window.scrollY;
}

function makeTooled(){

var theHTML=document.body.innerHTML, i;

for(i=0;i<words.length;++i){
theHTML = theHTML.replace(new RegExp(":"+words[i]+":","gi"),'<span class="Glossary" onmouseover="getMeaning(\''+words[i]+'\');" onmousemove="moveMeaning();" onmouseout="closeMeaning();">'+words[i]+'</span>');
}
document.body.innerHTML=theHTML;
}


window.onload=makeTooled;
document.onmousemove=getMousePos;

//-->
</script>
</head>
<body>

<div id="wordMeaning"></div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>

<div id="right"><p>I like :RaBbit:s and :FroG:s. I like :rabbit:s and :frog:s. I like :rabbit:s and :frog:s.</p></div>
<div id="center"><p>I like :Rabbit:s and :Frog:s.</p></div>
<div><p>I like :Rabbit:s and :Frog:s, hate Frogs though.</p></div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>

</body>
</html>