CSS Tooltip Box Without Images

Tooltip box Using CSS
The tooltip boxes you see on many websites are though created using background images but there’s another way out using just CSS  without requiring any background images. To create the tooltip box, create one outer div that encapsulates the information and the pointer div.

Here’s the html code you need to use:

<div class="tooltip">
Tooltip content goes here...
<div class="pointer">
<div class="inner-pointer"></div>
</div>
</div>

Now we need to absolutely or relatively position the tooltip div so that we can control the position of pointers in the div. The pointer div acts as outer body of pointer and inner-pointer acts as inner body. Both these div are sizeless but have border. The transparent border property is used to form the pointer shapes.

You can match the border-color of inner pointer to that of tooltip div background color and pointer div to that of border color to get a uniform look of the pointer.

Here’s the CSS to use:

<style type="text/css">
body{ background:#333; }
.tooltip {
padding: .8em;
width: 12em; background:#ff3311;
border-width: 2px !important;
border-color:#999;
position: absolute;
}
.tooltip .pointer, .tooltip .inner-pointer {
position: absolute;
width:0;
height:0;
border-bottom-width: 0;
background: none;
}
.tooltip .pointer {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 14px solid #999;
bottom:    -14px;
right: auto;
left: 5%;
margin-left: -7px;
}
.tooltip .inner-pointer {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #ff3311;
bottom:    auto;
top: -14px;
left: -5px;
}
</style>

You can play with different border style and positioning of the pointer div to control the look of your tooltip box.

CSS tooltip box without images

Without any use of images, these tooltip boxes will be easy on bandwidth and will load faster.

Text Shadow Property in CSS3

Mar 7th, 2009 In CSS

With CSS3, creating nice looking titles or headers won’t require Photoshop as it includes a nice text-shadow property to create text-shadows with just a single line of code. To apply text shadow onto an element, add this CSS property in its style definition. text-shadow: 3px 3px 4px #999; The text-shadow property looks cool, but it […]

Integrate Customized reCaptcha in your PHP Application

Mar 4th, 2009 In PHP

Captchas are an essential part of an online web form to prevent automated spam bots accessing your application. Though creating captchas is not a rocket science in PHP and can be easily integrated into web based forms but creating a more usable and accesible captcha which can even read out captchas on the fly is […]

Creating Content Tabs with jQuery

Mar 2nd, 2009 In jQuery

Organizing content into tabs is a great way to clean up your web page if it contains loads of information. Tabs let you show a piece of information at a time which can be easily digested by the user. User can then click on tabs to view more information. With jQuery, creating tabs is quite […]

Page 9 of 9« First...56789