Javascript/DHTML Tooltip Assistance Please

**Del087** · 04-28-2014, 06:34 PM

I am trying to put together a Javascript/DHTML tooltip for use on my website. I am very "wet behind the ears" when it comes to Javascript so, please be very specific with any responses. What I want to create is an image that displays a tooltip when hovered over. Within that tooltip, I want text, image, and link. Thus far, I've got to the point where I have my trigger image and the text portion of the tooltip. What I can't seem to figure out is how to add another image within the tooltip along with a link. Part two is that, upon clicking the trigger image, I cannot get page to open in new window. I am placing "target="_blank" right after "<a href="http://bit.ly/MbVBam"" in the <a> tag and the result I get is "error". It's kind of driving me crazy and although I am a self-proclaimed novice when it comes to coding, it seems to me that "target="_blank" should have worked. Any help would be greatly appreciated. If so inclined, you can email me at dlytle at realtimehockey.net if you need more information on exactly what I am trying to do. Again, please try to be as elementary as possible with any replies. Thank you in advance for your help. Below you will find the code I am using:

Thanks,

Dave

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#dhtmltooltip{
position: absolute;
width: 250px;
border: 2px solid orange;
padding: 2px;
font-size: 12;
color: white;
background-color: black;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=black,direction=150);
}

</style>


</head>
<body>
<div id="dhtmltooltip"></div>

<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

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

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>


<a href="http://bit.ly/MbVBam" onMouseover="ddrivetip('Great Skate<br>Save Up To 80% On Retail Pricing')";
 onMouseout="hideddrivetip()"><img src="http://img20.imageshack.us/img20/1135/75zx.png" border="0" width="350" height="85"</img></a>



</body>
</html>

**ddadmin** · 04-29-2014, 07:41 AM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question, in this case: http://www.dynamicdrive.com/dynamici...tmltooltip.htm

Hmm if I understood your request correctly, you wish to include a link inside the tooltip itself. If so, you should probably be looking at a drop down menu instead, as tooltips by their nature are usually not designed so the user can interact with the content inside it. Try the following two scripts instead:

http://www.dynamicdrive.com/dynamicindex1/popit.htm
http://www.dynamicdrive.com/dynamici...ckytooltip.htm

**vwphillips** · 04-29-2014, 09:25 AM

or a modified cool tooltip

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#dhtmltooltip{
position: absolute;
width: 250px;
border: 2px solid orange;
padding: 2px;
font-size: 12;
background-color: #FFFFCC;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=black,direction=150);
}

</style>


</head>
<body>
<div id="dhtmltooltip"></div>

<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

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

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.onmouseover=function(){ clearTimeout(ddrivetip.to); }
tipobj.onmouseout=function(){ hideddrivetip(); }
tipobj.innerHTML=thetext
clearTimeout(ddrivetip.to);
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
ddrivetip.to=setTimeout(function(){
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
},1000);
}
}

document.onmousemove=positiontip

</script>


<a href="http://bit.ly/MbVBam" onMouseover="ddrivetip('any HTML<br /><img src=\'http://www.vicsjavascripts.org/StdImages/1.gif\' /><br /><a href=\'http://www.dynamicdrive.com/\' >LINK</a>')";
 onMouseout="hideddrivetip()"><img src="http://img20.imageshack.us/img20/1135/75zx.png" border="0" width="350" height="85"</img></a>

<a href="http://bit.ly/MbVBam" onMouseover="ddrivetip('any HTML<br /><img src=\'http://www.vicsjavascripts.org/StdImages/2.gif\' /><br /><a href=\'http://www.dynamicdrive.com/\' >LINK</a>')";
 onMouseout="hideddrivetip()"><img src="http://img20.imageshack.us/img20/1135/75zx.png" border="0" width="350" height="85"</img></a>



</body>
</html>

Thread: Javascript/DHTML Tooltip Assistance Please

Thread Tools

Search Thread

Javascript/DHTML Tooltip Assistance Please

Similar Threads

Cool DHTML Tooltip & DHTML Window Widget

[DHTML] Office 2007 style tooltip in JavaScript

Close event DHTML window interferes with DHTML tooltip II?

Cool DHTML Tooltip and JavaScript Sound Effect

Arrow in Fixed Tooltip script like in Cool DHTML Tooltip II

Bookmarks

Bookmarks

Posting Permissions