Create CSS Tooltips

CSS

In this article we are going to share a CSS code snippet for creating simple Tooltips using CSS only. You can easily customize the color scheme of this CSS tooltip according to your own choice. The code is commented properly so that you can easily edit it according to your own choice.

CSS Tooltips

 

HTML Code

<a href="#">Hover me<span class="dap-tooltip mycolor">CSS only Tooltip example</span></a>

 

CSS Code

a:link,
a:visited {
color:#e74c3c;
position:relative;     /* this line is of code is necessary  */
text-decoration:none;
}
.dap-tooltip {
left:0;
right:0;
width:200px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:15px;
font-family:georgia,sans-serif;
font-size:16px;
text-align:left;
text-decoration:none;
line-height:1.5;
border:solid 1px;
border-radius:20px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
}
.dap-tooltip:before,
.dap-tooltip:after {
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
left:45px;
right:auto;
}
.dap-tooltip:before {
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}

/* Mouse Hover styles */
a:hover .dap-tooltip {
text-decoration:none;
visibility:visible;
opacity:1;
transition:all .5s linear;
-moz-transition:all .5s linear;
-webkit-transition:all .5s linear;
-o-transition:all .5s linear;
}
/* Colors and Backgrounds */
.dap-tooltip.mycolor {
color:#8d2f26;
background:#e74c3c;
border-color:#b53d31;
}
.dap-tooltip.mycolor:before {
border-top-color:#b53d31;
}
.dap-tooltip.mycolor:after {
border-top-color:#e74c3c;
}

Leave a Reply

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