How to Create CSS Tooltip without JavaScript

Add Tool

Create CSS Tooltip without JavaScript


Create CSS Tooltip without JavaScript

Want to Create 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 the tooltip box, create one outer div that encapsulates the information and the pointer div.

Add the below codes where you want to display css 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.

Source


Tags: tooltip, jquery tooltip, bootstrap tooltip, html tooltip, c# tooltip, w3schools tooltip, css tooltip, Create CSS Tooltip without JavaScript
Payza

About Masum Billah

Create CSS Tooltip without JavaScript 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: How to Create CSS Tooltip without JavaScript


adf.ly