DHTML tooltips with a transparent background

Added: May 17th, 2008
Filed under: Featured
Comments 3
Add your comment!
Tags: CSS, Dhtml

About This:

I used the DHTML tooltips from Dynamic Drive and modified the CSS by adding a slick transparent png image to add a little better look to the mouse over effect. I included a dark.png for sites with dark colors and a light.png for for sites with lighter colors.
Before:…

After:…

To install the DHTML tooltip effect to your site just follow these simple instructions

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

To add our transparent image to the tooltips just use the CSS below

Dark colored sites

#dhtmltooltip{
background: url(/images/dark.png) repeat;
color: #FFF;
position: absolute;
width: 150px;
border: 1px solid black;
padding: 2px;
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=gray,direction=135);
}

Light colored sites

#dhtmltooltip{
background: url(/images/light.png) repeat;
color: #111;
position: absolute;
width: 150px;
border: 1px solid black;
padding: 2px;
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=gray,direction=135);
}

Now for the images Just right click and save as

Dark.PNG

Light.PNG

Please let me know if you have any trouble, I will try my best to help out.