Rich HTML Ballon Tooltip problem

[fileserverdirect]

Title: Rich HTML Balloon Tooltip
URL: http://www.dynamicdrive.com/dynamici...oontooltip.htm
Problem:
I have a link inside my tooltip, I set the disappeardelay to 4000 (or 4 seconds) to give the user a chance to select the link. When they do, the status bar say "Loading: myurl.com/a/directory" so that page is loading. After the 4 seconds are up it stops loading and the link that was supplying the tool tip, when to that url instead. Whats going on and how can I stop it?

[ddadmin]

You shouldn't be including any links within the tooltip itself, as it's not meant to be used as a drop down content that users can interact with, just a way to display "hints/ tips" about the link in question. It's designed to disappear as soon as the user moves his mouse out of the activating link.

You may want to look at something like the following two scripts instead:

http://www.dynamicdrive.com/dynamici...owncontrol.htm
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

[fileserverdirect]

Yes I understand, but what I am doing, a tool-tip is perfect. At the bottom of the page there is the link that says [100% Valid Document]. In the tool-tip I show W3's valid document icon, in which the user can validate my document. I do not need a Drop-down menu off of a link. Is there any other way?

[ddadmin]

Hmmm the closest script I can think of then on DD is: http://www.dynamicdrive.com/dynamici...nkfloaties.htm

[fileserverdirect]

Is there any way to get them to appear right next to the link?

[ddadmin]

Ok, I've modified the Anylink Menu to basically act as a tooltip which the user can interact with (ie: click on a link amongst a description of text). Try the following complete example, by saving it as a new page:

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
padding: 5px;
z-index:100;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1='Need to learn JavaScript? Try <a href="http://www.javascriptkit.com">JavaScript Kit</a>'

//Contents for menu 2, and so on
var menu2='Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. More info: <a href="http://www.cssdrive.com">CSS Drive</a>'
		
var menuwidth='165px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

<body>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '250px')" onMouseout="delayhidemenu()">Web Design</a> |

<a href="default2.htm" onMouseover="return dropdownmenu(this, event, menu2, '300px')" onMouseout="delayhidemenu()">News Sites</a>

[jmurray]

You shouldn't be including any links within the tooltip itself, as it's not meant to be used as a drop down content that users can interact with, just a way to display "hints/ tips" about the link in question. It's designed to disappear as soon as the user moves his mouse out of the activating link.

You may want to look at something like the following two scripts instead:

http://www.dynamicdrive.com/dynamici...owncontrol.htm
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

I just wanted to ask if there is any sort of problem with including links inside the tooltip? I have found that it can be helpful to include a link to another page or website that offers more information about the topic. In addition, I have created a simple email form so a visitor can request additional information via e-mail, if desired.

I understand that this script was not intended for this type of use, but it offers the best option for me and what I'm trying to accomplish. Since I ran across this post, though, I wanted to check if there might be some performance issues or something if links and submission forms are also included in the tooltip.

Thanks.