question on bottom slide tooltip

**zhnet** · 04-26-2007, 03:18 AM

1) Script Title: Bottom Slide Tooltip

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...bottomtool.htm

3) Describe problem:

Can this tooltip be made to:
- stay firm (not disappear as soon as you move the mouse)
- have clickable content inside?

basically, if a person puts their mouse over a link, the bottom slide comes up, but is perhaps a link to another page, or even an advertiser?

AJ

**codeexploiter** · 04-26-2007, 03:42 AM

Check the following code

Code:

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

/***********************************************
* Bottom slide tooltip- by Ron Grafe (mailto:grafer@REMOVETHIScolumbus.rr.com)
* Website URL: http://www.gdevresources.com
* Script modified by and available at Dynamic Drive: http://www.dynamicdrive.com/
***********************************************/

//SET TOOLTIP DESCRIPTIONS BELOW
//Extend or contract array as needed
var description=new Array()
description[0]='This is tool-tip description 1. <a href="http://www.google.com">Google it</a>'
description[1]='<b>This is tool-tip descrition 2. <a href="http://www.yahoo.com">Yahoo!</a>'
description[2]='<i>This is tool-tip description 3'

//Do not edit below here

iens6=document.all||document.getElementById
ns4=document.layers

<!--GLOBAL VARIABLES-->
var thename
var theobj
var thetext
var winHeight
var winPositionFromTop
var winWidth
var startH=2
var openTimer
<!--END GLOBAL VARIABLES-->

<!--GLOBAL FUNCTIONS-->

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

function setObj(text,theswitch,inwidth,inheight) {
	thetext=text
	if(iens6){
		thename = "viewer"
		theobj=document.getElementById? document.getElementById(thename):document.all.thename
		winHeight=100
			if(iens6&&document.all) {
				winPositionFromTop=!window.opera? ietruebody().clientHeight : document.body.clientHeight
				winWidth=(ietruebody().clientWidth-ietruebody().leftMargin)
			}
			if(iens6&&!document.all) {
				winPositionFromTop=window.innerHeight
				winWidth=(window.innerWidth-(ietruebody().offsetLeft+30))
			}
			if(theswitch=="override") {
				winWidth=inwidth
				winHeight=inheight
			}
		theobj.style.width=winWidth+"px"
		theobj.style.height=startH+"px"
			if(iens6&&document.all) {
				theobj.style.top=ietruebody().scrollTop+winPositionFromTop+"px"
				//window.status=winPositionFromTop
				theobj.innerHTML = ""
				theobj.insertAdjacentHTML("BeforeEnd","<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>")
			}
			if(iens6&&!document.all) {
				theobj.style.top=window.pageYOffset+winPositionFromTop+"px"
				theobj.innerHTML = ""
				theobj.innerHTML="<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>"
			}
	}
	if(ns4){
		thename = "nsviewer"
		theobj = eval("document."+thename)
		winPositionFromTop=window.innerHeight
		winWidth=window.innerWidth
		winHeight=100
			if(theswitch=="override") {
				winWidth=inwidth
				winHeight=inheight
			}
		theobj.moveTo(0,eval(window.pageYOffset+winPositionFromTop))
		theobj.width=winWidth
		theobj.clip.width=winWidth
		theobj.document.write("<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>")
		theobj.document.close()
	}
	viewIt()
}

function viewIt() {
	if(startH<=winHeight) {
		if(iens6) {
			theobj.style.visibility="visible"
				if(iens6&&document.all) {
					theobj.style.top=(ietruebody().scrollTop+winPositionFromTop)-startH+"px"
				}
				if(iens6&&!document.all) {
					theobj.style.top=(window.pageYOffset+winPositionFromTop)-startH+"px"
				}
			theobj.style.height=startH+"px"
			startH+=2
			openTimer=setTimeout("viewIt()",10)
		}
		if(ns4) {
			theobj.visibility = "visible"
			theobj.moveTo(0,(eval(window.pageYOffset+winPositionFromTop)-startH))
			theobj.height=startH
			theobj.clip.height=(startH)
			startH+=2
			openTimer=setTimeout("viewIt()",10)
		}
	}else{
		clearTimeout(openTimer)
	}
}

function stopIt() {
	if(iens6) {
		theobj.innerHTML = ""
		theobj.style.visibility="hidden"
		startH=2
	}
	if(ns4) {
		theobj.document.write("")
		theobj.document.close()
		theobj.visibility="hidden"
		theobj.width=0
		theobj.height=0
		theobj.clip.width=0
		theobj.clip.height=0
		startH=2
	}
}
<!--END GLOBAL FUNCTIONS-->
</script>
</head>

<body>
<layer name="nsviewer" bgcolor="#FFFFCC" style="border-width:thin;z-index:1"></layer>
<script type="text/javascript">
if (iens6){
document.write("<div id='viewer' style='background-color:#FFFFCC;visibility:hidden;position:absolute;left:0;width:0;height:0;z-index:1;overflow:hidden;border:0px ridge white'></div>")
}
if (ns4){
	hideobj = eval("document.nsviewer")
	hideobj.visibility="hidden"
}

function init()
{
	clearTimeout(openTimer);
	setTimeout("stopIt()",8000);
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

<!--DEFAULT SETTINGS SNIPPET: PLACE INSIDE ANY TAG THAT SUPPORTS THE ONMOUSEOVER EVENT
onmouseover="setObj(description[0])" onmouseout="clearTimeout(openTimer);stopIt()"
END DEFAULT SETTINGS SNIPPET-->

<!--DEFAULT SETTINGS OVERRIDE SNIPPET: PLACE INSIDE ANY TAG THAT SUPPORTS THE ONMOUSEOVER EVENT
onmouseover="setObj(description[0],'override',your width here,your height here)" onmouseout="clearTimeout(openTimer);stopIt()"
END DEFAULT SETTINGS OVERRIDE SNIPPET-->

<b>Example</b><br>
<a href="#" onmouseover="setObj(description[1],'override',550,30)" >Test link</a>
</body>
</html>

If you want to make the tooltip stay then remove the onmouseout event from the link that generates the tooltip. Check the following code

Code:

<a href="#" onmouseover="setObj(description[1],'override',550,30)">Test link</a>

If you want to have hyperlinks in your tooltip provide the required links in the following section of the code

Code:

description[0]='This is tool-tip description 1. <a href="http://www.google.com">Google it</a>'
description[1]='<b>This is tool-tip descrition 2. <a href="http://www.yahoo.com">Yahoo!</a>'

In my code i've added a Javascript function which make the tooltip stays even if you move your mouse from the link. And the tooltip will be vanished after small time delay if you want to have like this use the following link (that generate the tooltip)

Code:

<a href="#" onmouseover="setObj(description[1],'override',550,30)" onmouseout="init();">Test link</a>

I've made the modifications and testing based on the demo Dynamic drive provided so you need to change this in such a way that it fits your situation

Thread: question on bottom slide tooltip

Thread Tools

Search Thread

question on bottom slide tooltip

Bookmarks

Bookmarks

Posting Permissions