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
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



![[del.icio.us]](http://designerfied.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://designerfied.com/wp-content/plugins/bookmarkify/digg.png)
![[Facebook]](http://designerfied.com/wp-content/plugins/bookmarkify/facebook.png)
![[Furl]](http://designerfied.com/wp-content/plugins/bookmarkify/furl.png)
![[Google]](http://designerfied.com/wp-content/plugins/bookmarkify/google.png)
![[Newsvine]](http://designerfied.com/wp-content/plugins/bookmarkify/newsvine.png)
![[Reddit]](http://designerfied.com/wp-content/plugins/bookmarkify/reddit.png)
![[Spurl]](http://designerfied.com/wp-content/plugins/bookmarkify/spurl.png)
![[StumbleUpon]](http://designerfied.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://designerfied.com/wp-content/plugins/bookmarkify/technorati.png)
![[Twitter]](http://designerfied.com/wp-content/plugins/bookmarkify/twitter.png)
![[Email]](http://designerfied.com/wp-content/plugins/bookmarkify/email.png)
Thanks for this! I’m going to use it on my site!
[...] DHTML tooltips with a transparent background Related StuffNo Related Post [...]
[...] - 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 [...]