Tooltip Layering Problem

**Blu_Haze** · 08-21-2006, 08:04 AM

1) Script Title: Cool DHTML Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tmltooltip.htm

3) Describe problem:

Originally I had a nice, detailed overview of the problem. But for some reason I got a login error, and everything I had was gone. So here's the short version of it.

One of the websites that I've been building for a friend has translucent tables in it (using "filter: alpha(opacity = 60); -moz-opacity: 0.60;" in the CSS for the <td> class of any table that needs translucency). So far I haven't had any serious problems with it, however it's giving my tooltips a hard time.

The translucency from the parent table is being passed on to the tooltip as well. Now, I don't mind this at all, since the translucent tooltip really seems to fit with the rest of the website. It is causing a problem however with a nearby table completely overlapping with the tooltip.

This isn't a problem at 1280 or higher resolutions, since I've placed the tip in a way that it wouldn't ever come into contact with it, but at 1024 or lower, the edge of the browser forces the tooltip to jump to the left side instead of the right, sliding underneath the center table. I've tried adjusting the z-index of the tooltip as well as the <td>, <tr>, and the class with the translucency in it, but nothing I've tried has had any effect. I'm no expert with how z-index works though, and there's problebly a method I haven't tried yet.

The only thing I can think of to fix it is to either figure out a way to stop the overlapping entirely, creatively position the tooltip so that it doesen't intersect with the center table, or somehow stop the translucency of the parent table from being passed on to the tooltip itself (hopefully a last resort).

Unfortunately, I haven't quite figured out how to accomplish any of those yet.

Thanks in advance.

**jscheuer1** · 08-21-2006, 08:41 AM

You should put the tip division as the first thing after the opening <body> tag. If you want it to have opacity properties, set them for it:

Code:

 . . . ntent="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css"href="bunnies.css" />
</head>
<body>
<div id="dhtmltooltip" style="opacity:0.7;filter:alpha(opacity=70);"></div>
<table bgcolor="#000000" width="960" border="0" align="center" cellspacing="0" cellpadding="27">
<tr>
<td>
<table width="100%" cellspa . . .

Don't forget to remove the other one from the table.

**Blu_Haze** · 08-21-2006, 06:35 PM

That worked perfectly. Now the tooltip isn't being overlapped by anything, and I like knowing that I can control whether or not I actually want it to have translucency now. I just can't believe that all I had to do was move the <div> outside of the table. It seems like it's always the simplest things that get me.

Thanks for the help, I appreciate it.

Thread: Tooltip Layering Problem

Thread Tools

Search Thread

Tooltip Layering Problem

Bookmarks

Bookmarks

Posting Permissions