How to Create Tooltip Without JavaScript Using Only Css

Tooltip Without JavaScript

We know tooltip make site looking beautiful. Now we will create a tooltip box without using any background images and javaScript. To create Tooltip Without JavaScript create one outer div that encapsulates the information and the pointer div.

Add the below codes where you want to display this tooltip box

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

Now you need to add the below css codes in your style sheet

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

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

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>