CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: DDrive Tooltip Help

  1. 07-08-2014, 10:04 PM #1
    Del087
    Del087 is offline New Comer (less than 5 posts)
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DDrive Tooltip Help

    1) Script Title: DHTML Tooltip Script

    2) Script URL (on DD):

    3) Describe problem: Below is the script for a tooltip that I created. I'm fairly new at coding so, please be specific with any replies. I'm happy with the current tooltip, however, I want to add a table within the tooltip and possibly some links. Not sure if this is possible or not but, any help would be appreciated. Thanks, in advance.

    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 Save Up To<br>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>
    Last edited by james438; 07-09-2014 at 03:14 AM. Reason: format
    Reply With Quote Reply With Quote
  2. 07-09-2014, 11:37 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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);
}

#mytip{
position: absolute;
width: 450px;
border: 2px solid orange;
padding: 2px;
font-size: 12;
color: white;
background-color:red;
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>
<div id="mytip"><a href="#" >Any HTML</a></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=10 //Customize y offset of tooltip
var hidedelay=1000; // the delay before hiding the tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
var tipobj;

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

function ddrivetip(thetext, thecolor, thewidth){
 tipobj=document.getElementById(thetext)||document.getElementById("dhtmltooltip")
 var o=ddrivetip[tipobj.id];
 if (tipobj&&!ddrivetip[tipobj.id]){
  ddrivetip[tipobj.id]=o={
   obj:tipobj
  }
  o.obj.onmouseover=function(){ clearTimeout(o.to); }
  o.obj.onmouseout=function(){ hideddrivetip(this.id); }
 }

 if (o){
  clearTimeout(o.to);
  if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
  if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
  tipobj.id=='dhtmltooltip'?tipobj.innerHTML=thetext:null;
  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(id){
 var o=ddrivetip[id]||ddrivetip['dhtmltooltip']
 enabletip=false;
 if (o){
  o.to=setTimeout(function(){ o.obj.style.visibility="hidden"; o.obj.style.left="-1000px"; },hidedelay);
 }
}

document.onmousemove=positiontip

</script>


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



</body>
</html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Rich HTML Balloon Tooltip - Tooltip position in Firefox and other browser incorrect
    By vikasmta in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-23-2012, 05:45 AM
  2. Resolved Tooltip - Table Borders still visible after tooltip has closed.
    By Cyclone in forum JavaScript
    Replies: 2
    Last Post: 10-09-2008, 05:58 AM
  3. Rich HTML Balloon Tooltip > tooltip inside of another tooltip?
    By croceldon in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-24-2008, 03:35 PM
  4. ddrive iframe containing ajax script on IE
    By swingtrader in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-18-2008, 11:32 AM
  5. Arrow in Fixed Tooltip script like in Cool DHTML Tooltip II
    By Null in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-01-2006, 04:23 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules