Welcome Guest ( Log In | Register )




                Web Hosting Guide

 
Reply to this topicNew Topic
Creating Tooltips, DHTML, HTML, CSS, Javascript...
GM-University
post Jul 15 2005, 01:59 PM
Post #1


Member [ Level 1 ]
Group Icon

Group: Members
Posts: 32
Joined: 4-May 05
Member No.: 4,707


Here is a little tutorial to make those small yellow-background boxes (tootltips) that pop-up for some links that describe them when you hover the mouse over them, it uses DHTML, CSS, HTML, and Javascript, so it gives us a much more wide range than my previous tutorials that just where on HTML.
OK, so here we go...

Put this right under <body>
CODE
<div id="dhtmltooltip"></div>
<script type="text/javascript">

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.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+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>


Put this with your CSS <style> tag, or .css file.
CODE
#dhtmltooltip {
position: absolute;
width: 150px;
border: 1px solid #C1C1C1;
padding: 2px;
background-color: #EFEFEF;
color: #000000;
visibility: hidden;
z-index: 100;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}


And put this in your link
CODE
onMouseover="ddrivetip('Your tooltip text','black', 300)";
onMouseout="hideddrivetip()"

A link example would be
CODE
<a href="http://www.trap17.com/forums/saint-michaels-html-tips-tricks-4-t24328.html"onMouseover="ddrivetip('Your text here','red', 300)";
onMouseout="hideddrivetip()">Text Here</a>
Go to the top of the page
 
+Quote Post
AzNxSuperNova
post Jul 15 2005, 11:56 PM
Post #2


Member [ Level 1 ]
Group Icon

Group: Members
Posts: 41
Joined: 13-July 05
Member No.: 7,065


I personally tried this tutorial and it was very straight forward. I was able to get the results and find that it can easily be customized to suit your needs through the CSS <style> tag. I also would like to point out that when I opened it in Internet Explorer, it was initially blocked with Internet Explorer saying that it was restricting the file from showing active content that could access your computer. However, I'm not sure if other browsers block it. Either way, it was a great tutorial and very helpful.
Go to the top of the page
 
+Quote Post
GM-University
post Jul 16 2005, 12:47 PM
Post #3


Member [ Level 1 ]
Group Icon

Group: Members
Posts: 32
Joined: 4-May 05
Member No.: 4,707


QUOTE (AzNxSuperNova @ Jul 15 2005, 11:56 PM)
I personally tried this tutorial and it was very straight forward. I was able to get the results and find that it can easily be customized to suit your needs through the CSS <style> tag. I also would like to point out that when I opened it in Internet Explorer, it was initially blocked with Internet Explorer saying that it was restricting the file from showing active content that could access your computer. However, I'm not sure if other browsers block it. Either way, it was a great tutorial and very helpful.
*

Yeah, Internet Explorer does that with Javascript for me too, so that is why I only use FireFox now, thanks for the feedbakc. smile.gif
Go to the top of the page
 
+Quote Post
Neverseen
post Jul 17 2005, 06:32 PM
Post #4


Premium Member
Group Icon

Group: Members
Posts: 227
Joined: 25-April 05
Member No.: 4,369


very nice tutorial smile.gif A lot of code ! hehe tongue.gif quite usefull and easy to understand wink.gif thanks
Go to the top of the page
 
+Quote Post
Illudar
post Aug 5 2005, 12:06 AM
Post #5


Newbie [ Level 2 ]
Group Icon

Group: Members
Posts: 22
Joined: 4-August 05
Member No.: 7,640


Nice tutorial. I like it a lok, easy to understand and helpful!
Go to the top of the page
 
+Quote Post
abhiram
post Aug 5 2005, 02:06 AM
Post #6


Hedonist at large
Group Icon

Group: Members
Posts: 610
Joined: 30-July 05
From: another realm
Member No.: 7,524


Great tutorial. I'm going to use this in my site. Thanks a lot.
Go to the top of the page
 
+Quote Post
iGuest
post Mar 6 2008, 09:07 AM
Post #7


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 0
Joined: 1-November 07
Member No.: 25,869


thanks
Creating Tooltips

This is really nice,

I have tried this for the image but its doesn't work?

-reply by sudhir
Go to the top of the page
 
+Quote Post
naro2212
post Mar 17 2008, 10:36 PM
Post #8


Newbie [ Level 2 ]
Group Icon

Group: Members
Posts: 12
Joined: 17-March 08
Member No.: 29,182


WoW i thought that was only possible for ads well TY dose it work with images and can you change the color of them
Go to the top of the page
 
+Quote Post

Reply to this topicNew Topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   12 tansqrx 8,779 1st November 2009 - 06:02 PM
Last post by: iG-Dave
No New Posts   4 Aditya 2,700 30th October 2009 - 03:21 AM
Last post by: iG-ramu
No New Posts   14 vicky99 6,972 14th October 2009 - 07:41 AM
Last post by: iG-sal
No New Posts   4 arkad 2,972 15th September 2009 - 09:52 AM
Last post by: iG-Miles
No New Posts   4 SunBlind 1,593 26th August 2009 - 11:01 AM
Last post by: iG-yazid
No New Posts   7 whistle 2,613 25th August 2009 - 06:24 AM
Last post by: iG-
No New Posts   7 BHerath 1,031 19th August 2009 - 01:07 PM
Last post by: iG-nick
No New Posts   18 webguide 5,727 15th August 2009 - 04:07 PM
Last post by: iG-Sherry
No New Posts   16 NoMore 4,061 10th August 2009 - 09:04 PM
Last post by: iG-BayBritBameBrogrammer
No New Posts   10 better 1,569 9th August 2009 - 08:52 AM
Last post by: iepbunleng016
No New Posts   2 turbopowerdmaxsteel 7,962 23rd July 2009 - 06:02 AM
Last post by: iG-omar shan
No New Posts   8 Molarmite 2,679 3rd June 2009 - 09:36 AM
Last post by: yordan
No New Posts 12 Lukey535 2,570 11th May 2009 - 01:44 PM
Last post by: Michalak
No New Posts   3 gopi_anurag1205 347 23rd February 2009 - 06:08 AM
Last post by: TavoxPeru
No New Posts   4 Giniu 2,307 20th February 2009 - 11:42 PM
Last post by: iG-Doug


Web Hosting Powered by ComputingHost.com.