DHTML tooltips with a transparent background

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

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.


Twitter Facebook MySpace Digg Stumble It!

3 Responses to “DHTML tooltips with a transparent background”

  1. easydog says:

    Thanks for this! I’m going to use it on my site!

  2. [...] DHTML tooltips with a transparent background Related StuffNo Related Post [...]

  3. [...] – 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 [...]

Leave a Reply