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.
Without any use of images, these tooltip boxes will be easy on bandwidth and will load faster.
0 comments:
Post a Comment