Now a days Developers are doing wonder with CSS3, They are almost implementing all the effects using CSS3 alone. So Today I am going to explain you about creating CSS3 tooltips.
Contents
Features
- Multiple Colors
- Multiple Directions
- Pure CSS3
- Works in Major Browsers
I have used pure css3 tooltips to implement multi color tooltips with multiple directions.
Just add this class to any element to get the tooltip position.
- Left Tooltip – css-tooltip-left
- Right Tooltip – css-tooltip-right
- Bottom Tooltip – css-tooltip-bottom
- Top Tooltip – css-tooltip-top
Just add this class to any element to change the color of tooltip
- Blue Color – color-blue
- Red Color – color-red
- Orange Color – color-orange
- Green Color – color-green
HTML usage – Fancy Tooltips using CSS3
<a class="css-tooltip-top color-blue" href="#"><span>W3lessons.info - Web 2.0 Programming Blog</span>Top tooltip</a>
Please feel free to use this code in your web projects
CSS3 Tooltips – Code
.css-tooltip-top,
.css-tooltip-bottom,
.css-tooltip-right,
.css-tooltip-left {
position: relative !important;
display: inline-block !important;
text-decoration: none !important;
}
.css-tooltip-top span,
.css-tooltip-bottom span,
.css-tooltip-right span,
.css-tooltip-left span,
.css-tooltip-diagonal-right span,
.css-tooltip-diagonal-left span {
min-width: 180px;
font-family: arial, sans-serif !important;
font-size: 13px !important;
line-height: normal !important;
text-align: left !important;
padding: 10px 10px 12px 10px !important;
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 9999999 !important;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
-moz-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
-o-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
-ms-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
transition-timing-function: cubic-bezier(0.35,0,0.35,1);
}
.css-tooltip-top span:before,
.css-tooltip-bottom span:before,
.css-tooltip-right span:before,
.css-tooltip-left span:before,
.css-tooltip-diagonal-right span:before,
.css-tooltip-diagonal-left span:before {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
}
/* Tool tip Top */
.css-tooltip-top span {
left: -10px;
bottom: 100%;
margin-bottom: 30px;
-webkit-transition-property: opacity, margin-bottom, visibility;
-moz-transition-property: opacity, margin-bottom, visibility;
-o-transition-property: opacity, margin-bottom, visibility;
-ms-transition-property: opacity, margin-bottom, visibility;
transition-property: opacity, margin-bottom, visibility;
}
.css-tooltip-top span:before {
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 8px solid #000;
border-bottom: 0 !important;
bottom: -8px;
left: 15px;
}
.css-tooltip-top:hover span {
margin-bottom: 10px;
/* End Position */
visibility: visible;
opacity: 1;
}
/* tooltip left
-------------------------------------------------------------- */
.css-tooltip-left span {
right: 100%;
top: -7px;
margin-right: 35px;
-webkit-transition-property: opacity, margin-right, visibility;
-moz-transition-property: opacity, margin-right, visibility;
-o-transition-property: opacity, margin-right, visibility;
-ms-transition-property: opacity, margin-right, visibility;
transition-property: opacity, margin-right, visibility;
}
.css-tooltip-left span:before {
border-left: 8px solid #000;
border-right: 0 !important;
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
top: 11px;
right: -8px;
}
.css-tooltip-left:hover span {
margin-right: 15px;
visibility: visible;
opacity: 1;
}
/* tooltip right
-------------------------------------------------------------- */
.css-tooltip-right span {
left: 100%;
top: -7px;
margin-left: 35px;
-webkit-transition-property: opacity, margin-left, visibility;
-moz-transition-property: opacity, margin-left, visibility;
-o-transition-property: opacity, margin-left, visibility;
-ms-transition-property: opacity, margin-left, visibility;
transition-property: opacity, margin-left, visibility;
}
.css-tooltip-right span:before {
border-left: 0 !important;
border-right: 8px solid #000;
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
top: 11px;
left: -8px;
}
.css-tooltip-right:hover span {
margin-left: 15px;
visibility: visible;
opacity: 1;
}
/*tooltip bottom
-------------------------------------------------------------- */
.css-tooltip-bottom span {
left: -10px;
top: 100%;
margin-top: 30px;
-webkit-transition-property: opacity, margin-top, visibility;
-moz-transition-property: opacity, margin-top, visibility;
-o-transition-property: opacity, margin-top, visibility;
-ms-transition-property: opacity, margin-top, visibility;
transition-property: opacity, margin-top, visibility;
}
.css-tooltip-bottom span:before {
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 0 !important;
border-bottom: 8px solid #000;
top: -8px;
left: 15px;
}
.css-tooltip-bottom:hover span {
margin-top: 10px;
visibility: visible;
opacity: 1;
}
/* Tooltip Color */
.color-blue span {
color: #ffffff !important;
background: #31598a;
background: -moz-linear-gradient(top, #37659d 0%, #31598a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37659d), color-stop(100%,#31598a));
background: -webkit-linear-gradient(top, #37659d 0%,#31598a 100%);
background: -o-linear-gradient(top, #37659d 0%,#31598a 100%);
background: -ms-linear-gradient(top, #37659d 0%,#31598a 100%);
background: linear-gradient(top, #37659d 0%,#31598a 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.color-blue span:before {
border-color: #31598a;
}
.color-blue span:after {
content: "";
display: block;
border-top: 1px solid #6591c3;
position: absolute;
left: 0px;
top: 1px;
width: 100%;
height: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.color-green span {
color: #ffffff !important;
background: #206906;
background: -moz-linear-gradient(top, #37790c 0%, #206906 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37790c), color-stop(100%,#206906));
background: -webkit-linear-gradient(top, #37790c 0%,#206906 100%);
background: -o-linear-gradient(top, #37790c 0%,#206906 100%);
background: -ms-linear-gradient(top, #37790c 0%,#206906 100%);
background: linear-gradient(top, #37790c 0%,#206906 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.color-green span:before {
border-color: #206906;
}
.color-green span:after {
content: "";
display: block;
border-top: 1px solid #4f9c21;
position: absolute;
left: 0px;
top: 1px;
width: 100%;
height: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.color-green span strong {
background: #246407;
border-bottom: 1px solid #205a06;
}
/*orange*/
.color-orange span {
color: #ffffff !important;
background: #c34722;
background: -moz-linear-gradient(top, #cb581f 0%, #c34722 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb581f), color-stop(100%,#c34722));
background: -webkit-linear-gradient(top, #cb581f 0%,#c34722 100%);
background: -o-linear-gradient(top, #cb581f 0%,#c34722 100%);
background: -ms-linear-gradient(top, #cb581f 0%,#c34722 100%);
background: linear-gradient(top, #cb581f 0%,#c34722 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.color-orange span:before {
border-color: #c34722;
}
.color-orange span:after {
content: "";
display: block;
border-top: 1px solid #e28266;
position: absolute;
left: 0px;
top: 1px;
width: 100%;
height: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.color-orange span strong {
background: #bf461a;
border-bottom: 1px solid #ac3f17;
}
/*red*/
.color-red span {
color: #ffffff !important;
background: #b01c34;
background: -moz-linear-gradient(top, #c01e38 0%, #b01c34 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c01e38), color-stop(100%,#b01c34));
background: -webkit-linear-gradient(top, #c01e38 0%,#b01c34 100%);
background: -o-linear-gradient(top, #c01e38 0%,#b01c34 100%);
background: -ms-linear-gradient(top, #c01e38 0%,#b01c34 100%);
background: linear-gradient(top, #c01e38 0%,#b01c34 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.color-red span:before {
border-color: #b01c34;
}
.color-red span:after {
content: "";
display: block;
border-top: 1px solid #e96e82;
position: absolute;
left: 0px;
top: 1px;
width: 100%;
height: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.color-red span strong {
background: #b0182d;
border-bottom: 1px solid #9d1628;
}
I hope you will like this tutorial. You can use this code in your live projects.
Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!
Thanks!
This is great. Thank you Karthi. I planning to convert it in to LESS mixin. It may be much simple for LESS users. Thanks again. and one more suggestion, why don’t we use attribute value to load text in to after or before content instead of using a span.
like
Tooltip
[class^=’css-tooltip-‘]:after {
content: attr(title);
}
so we can simply complete everything inside a tag itself