Fancy Tooltips using CSS3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Tooltips</title>
<style>
body {
background:#fafafa;
}
.container {
width: 800px;
border: 1px solid #C4CDE0;
border-radius: 2px;
margin: 0 auto;
height: 500px;
background:#fff;
padding-left:10px;
margin-bottom:30px;
}
.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;
}
</style>
</head>
<body>
<div class="container">
<p>
<a class="css-tooltip-bottom color-red" target="_blank" href="#"><span>Tutorial101 laravel</span>Bottom tooltip</a>
</p>
<br />
<p>
<a class="css-tooltip-left color-green" href="#" target="_blank"><span>Tutorial101 codeignater</span>Left tooltip</a>
</p>
<br />
<p>
<a class="css-tooltip-right color-orange" target="_blank" href="#"><span>Tutorial101 Cakephp</span>Right tooltip</a>
</p>
</div>
</body>
</html>
