Welcome Guest ( Log In | Register )



 
Reply to this topicStart new 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
Feedbacker
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 topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Add Favicon To Your Site(38)
  2. Creating A Color Combination(17)
  3. This Page Was Last Modified On.....(4)
  4. Creating A Webpage Using Photoshop(0)
  5. Creating A Css Rollover Menu (with Table Cells)(9)
  6. Three Html/ Css/ Javascript Tutorials(6)
  7. Creating Rollover Images With Css(12)
  8. Upgrading Your Site!(0)
  9. Starting Your Website With Html(7)
  10. Html Meta Tags Tutorial(21)
  11. Creating A Simple But Effective Website(10)
  12. {} Html'ing & Basic Codes {}(0)
  13. {} Changing Font Color / Size {}(14)
  14. Creating Your Own Simple But Effective Site(26)
  15. Integrating Html And Css(9)
  1. A Tutorial For Html Color Codes(7)
  2. Coding Html Properly In The New Age(15)
  3. 4 Html Based Website Tips(4)


 



- Lo-Fi Version Time is now: 6th July 2008 - 06:35 AM