ToolTips with Hyperlinks 1

[k4ghg]

I have six images on a page and want to create a mouse over tooltip (popup?) with links. I found the code below and it works well, except if I have more than one tooltip the timer does not seem to work, also, if I move the mouse I get several tooltips at once. I tried adding a close button to the tooltip display and to have only one tooltip active at a time but was not too successful. I would appreciate any help or suggestions on how to display only one tooltip at a time. Thanks... Ronnie

<SCRIPT LANGUAGE = "JavaScript">
<!--
var tt;
var ttnum;

var q;

var s = null;

var timer_on = false;

function setup_timer(tt){
q=4;stopcounter(tt, ttnum);
start_timer(ttnum);}

function stopcounter(tt){
if (tt==1){
ttnum= "tooltip1";
document.getElementById('tooltip1').style.display='block'; }
if (tt==2){
ttnum= "tooltip2";
document.getElementById('tooltip2').style.display='block'; }
if (tt==3){
ttnum= "tooltip3";
document.getElementById('tooltip3').style.display='block'; }
if (tt==4){
ttnum= "tooltip4";
document.getElementById('tooltip4').style.display='block'; }
if (tt==5){
ttnum= "tooltip5";
document.getElementById('tooltip5').style.display='block'; }
if (tt==6){
ttnum= "tooltip6";
document.getElementById('tooltip6').style.display='block'; }
if(timer_on){clearTimeout(s);}
timer_on=false;}

function start_timer(ttnum){
if (q==0){stopcounter();bye(ttnum);}
else {q=q-1;timer_on=true;
s=self.setTimeout("start_timer(ttnum)",1000);}}

function bye(){
document.getElementById(ttnum).style.display = 'none';
tt=0;
}

//-->

</SCRIPT>

....
<div class="thumbnail">
<form>
<input onmouseover="setup_timer(1)" alt="test1" src="

http://www.site.com/pic1.jpg"

type="image"/>
<span>test pic</span>
</form>
</div>

...

<div id="tooltip1">
<p>
<b>Tip 1</b>
<a href="

http://www.google.com/">Link

(optional)</a>
</p>
</div>

 

[vacunita]

Use the onmouseout event of the link to close the tooltip.

In other words call the bye() function from onmouseout, so the tooltip gets closed when the mouse moves away from it.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[k4ghg]

Thanks for the suggestion. I tried the onmouseout with the tooltip:

<div id="tooltip1" class="tips" onmouseout="bye(tooltip1)">

and when I move the mouse from the link to select an item in the popup, the tooltip closes. Thanks again.

 

[vacunita]

Use the onmouseout event of the tooltip, rather than the link.

<div id="tooltip1" onmouseout="bye();">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[k4ghg]

Txs, it didn't work so I added a close button to each tool tip. Ronnie...

 

[WebsiteCoder]

// Cleaner Tooptip Removal by Everwebby
// Note: Used in external JS
window.onload=function(){


anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
anchorTags.removeAttribute("title");
//alert(anchorTags.innerHTML);
}

}

 

[feherke]

Hi

WebsiteCoder, please note that in this thread
[ul]
[li]nobody talked about [tt]title[/tt] attributes[/li]
[li]nobody intended to remove anything[/li]
[/ul]


Feherke.