CSS Tooltip Box Without Images

Posted in CSS

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.

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

3 Responses (Add Your Comment)

  1. fabien says:

    A demo will be fine !

  2. LML says:

    yea, a demo would be nice:)

    I liked this alot, anyways:o

  3. Sourish Nath says:

    Hey ,

    I just found you out while googling , and this a really nice blog. :)
    Expect me to be a frequent visitor here. Will read all your posts
    Thanks ,

    Regards ,
    Sourish
    (Admin)
    OneTrickADay

Comments are closed for this post.