DHTML tooltips with a transparent background

May 17, 2008

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.

Related Posts

1950s Photoshop Design Background

Add custom MooTools tooltips to your site

8 Responses to “DHTML tooltips with a transparent background”

1. easydog says:

   May 17, 2008 at 9:41 pm

   Thanks for this! I’m going to use it on my site!
2. » DHTML tooltips with a transparent background Webcreatives says:

   May 18, 2008 at 12:13 am

   [...] DHTML tooltips with a transparent background Related StuffNo Related Post [...]
3. Bookmarks about Dhtml says:

   December 26, 2008 at 6:30 pm

   [...] - bookmarked by 5 members originally found by CPMiao on 2008-11-18 DHTML tooltips with a transparent background http://designerfied.com/dhtml-tooltips-with-a-transparent-background.html - bookmarked by 6 [...]