Create your own HTML5 and CSS3 Tooltip

tooltip

HTML5:

Tooltip Above Text:

<a tooltip=”This is how your tooltip will show.”  class=”tooltip-above”> When you Hover This text, you will see a tooltip </a>
Tooltip BelowText:

<a tooltip=”This is how your tooltip will show.”  class=”tooltip-below”> When you Hover This text, you will see a tooltip </a>

Note: We usually use Title for tooltips, but I decided to create my own HTML5 attribute tag so avoid having browser showing two tooltips which is WRONG, mine and the default grey tooltip by the browser as shown below:

tooltip-wrong

DEMO

CSS3:

Tooltip Above Text:

<style>

.tooltip-above{

display: inline;
position: relative;
width: auto;
font-family: Arial, Calibri;

}

.tooltip-above:hover:after{

background: #333;
background: rgba(0,0,0,.8);
top: -53px;
color: #fff;
content: attr(tooltip);
left: 0;
padding: 5px 10px;
position: absolute;
z-index: 98;
min-width: 250px;
min-height: 30px;

}

.tooltip-above:hover:before{

border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0px 6px;
top: -5px;
content: “”;
left: 50%;
position: absolute;
z-index: 99;

}

</style>

Tooltip Below Text:

<style>

.tooltip-below{

display: inline;
position: relative;
width: auto;
font-family: Arial, Calibri;

}

.tooltip-below:hover:after{

background: #333;
background: rgba(0,0,0,.8);
top: 26px;
color: #fff;
content: attr(tooltip);
left: 0;
padding: 5px 10px;
position: absolute;
z-index: 98;
min-width: 250px;
min-height: 30px;

}

.tooltip-below:hover:before{

border: solid;
border-color: #333 transparent;
border-width: 0px 6px 6px 6px;
top: 20px;
content: “”;
left: 50%;
position: absolute;
z-index: 99;

}

</style>

Demo:

View the above code

2 thoughts on “Create your own HTML5 and CSS3 Tooltip

    • yes thats the magic with CSS3. Basically what is happening you set the borders to either a solid color or to transparent to at least 3 slides of the rectangle/square. Wherever has a solid color as border will be showing.

      For instance:

      border-bottom: 10px solid black;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;

      Which will give u a normal trangle Triangle

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s