PDA

Click to See Complete Forum and Search --> : tool tip

boutte
02-14-2007, 06:32 PM
This is wrong I know but I've tried a dozen or more other methods that I picked up from different sources and they don't even come as close as this does. I just want the li2 to become visible when I mouse over the box.

<style type="text/css">
ul {margin:0; padding:0;}
li#li1 {display:block;position:relative;list-style-type:none;
background-color:#8FDEF8; width: 150px; height:14px; margin:0; padding:0px; border-style: solid; border-style: outset; border-width:2px;border-color: white; font-family: arial;font-weight:bold; font-size:8pt;text-align:left;}

li#li2 {display:none;position:absolute;left:130px;list-style-type:none;background-color: #d5f0f8; width: 150px; height:140px; margin:0px; padding:10px; border-style: solid; border-style: outset; border-width:2px;border-color: white; font-family: arial;font-weight:bold; font-size:8pt;text-align:left;z-index:3;}

li2:hover{display:block;}

</style>
</HEAD>

<BODY>
<ul>
<li class="box2" style="font-size:12pt;"><b>FREE STUFF</b></li>
<li class="box2">TUTORIALS</li>

<li id='li1'><a href="http://www.w3schools.com/default.asp">w3schools</a>
<li id='li2'>w3schools</li>
<li id='li1'><a href="http://www.w3schools.com/default.asp">w3schools</a>

</ul>

I'm about to just forget about this but I've said that 5 or 6 times already. It can't be that hard to do.
zackbloom
02-14-2007, 07:27 PM
Check out the book "Advanced Web Standards Solutions" I has a section on CSS tooltips.
WebJoel
02-14-2007, 08:41 PM
I am not following what you want and your example is way from what I would thik would achieve this. -Are you trying to create a 'tool tip' effect, or additional descriptive text that, upon hover over the button/link, becomes visible? If this, -I have some ideas. I started writing this up, -not quite working yet but seeing results. If this is what you are after or if you could provide some more information as to wht you are after, it would be helpful. :)
boutte
02-15-2007, 09:57 AM
WebJoel
Yes I want the popup so that it can give a description of the site that the link points to. So it does'nt have to be a link itself, just a short description. The box is there now, it's just invisible, now I just need to make it appear when you mouse over the parent.
WebJoel
02-15-2007, 12:41 PM
-Like this? (Footnotes in HTML, -should be enough to help you set this up)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
a:link {color:#212121;}
a:visited {color:#008080;}
a:hover {color:#FF0000;}
a:active {color:#000000;}
/* above: controls colors of links */

.buttons a {color:#000000; background-color:white; display:block;
font:13px arial, sans-serif; font-weight: bold; text-decoration:none;
margin-top:3px}
/* Above: controls how 'buttons' anchors behave */

.buttons a:hover {background-color:#ffffff; font:13px verdana;
font-weight: bold; text-decoration:none;}
/* Above: controls how 'buttons anchor on-hover' behave */

#menu {position:relative; width:160px; height:auto;
text-align: center; padding:10px 0 10px 0; border:1px double silver;}
/* Above: the actual "menu", a list of links */

#menu a span {display:none;}
/* Above: how the "a <span>text la-la-la text</span>" is handled */

#menu a:hover span {
display:block; position:absolute;
top:145px; left:10px;
width: 125px;
z-index: 100;color:black;
background-color:#fff99d; padding:10px; font:1em Verdana, sans-serif;
border:1px solid black;
/* Above: how the "a <span>text la-la-la text</span>" is handled when
hovering over the visible link-text (the 'pop-up') */
}
</style>


<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>

<div id="menu" class="buttons">
<div id="menu">
<a href="http://www.w3cschools.com">w3cschools<span>World Wide Web Consortium ("W3C") Schools Web Site</span></a>
<a href="http://www.webdeveloper.com">webdeveloper.com<span>WebDeveloper.com Forums, offering free help with your web pages.</span></a>
<a href="http://www.msn.com">MSN<span>The MSN Start page: A useful "HOME PAGE" as place to start your daily search.</span></a>
<a href="http://joelburdick.awardspace.com">My Site<span>Joel's online site of published web sites.</span></a>
<a href="http://joelburdick.awardspace.com/carved_wood">Ontario Carved Driftwood<span>A Wood-carved Elephant Head that
I made this past summer from driftwood that I found here in Toronto by Lake Ontario.</span></a>
</div>
</div>

</body>
</html>
Notice that the "<span>text etc etc</span>" is IN the anchor-text, but "a span {display:none;}" makes is "invisible". What we are doing is, on-hover, making this "display:block;", which is "visible" and "positioned" away from the actual location (and because it is stylable, so you can also affect width, color, font-family, and background-color, etc etc).
Have fun with this! :D
boutte
02-15-2007, 06:26 PM
Thanks man,
I'll try it out. Looks promising.

It's Mardis Gras down here this weekend (if the levees don't break) so I might not have a lot time to work on the site for a few days.

Happy Mardis Gras!!!
WebJoel
02-15-2007, 07:39 PM
Bon Fat-Tuesday to you, too. :D