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 fancy tooltips using pure css3.

Features

  1. Multiple Colors
  2. Multiple Directions
  3. Pure CSS3
  4. Works in Major Browsers

Fancy Tooltips using Pure CSS3

I have used pure css3 to implement multi color tooltips with multiple directions.

Just add this class to any element to get the tooltip position.

  1. Left Tooltip – css-tooltip-left
  2. Right Tooltip – css-tooltip-right
  3. Bottom Tooltip – css-tooltip-bottom
  4. Top Tooltip – css-tooltip-top

Just add this class to any element to change the color of tooltip

  1. Blue Color – color-blue
  2. Red Color – color-red
  3. Orange Color – color-orange
  4. Green Color – color-green

HTML usage

<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 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!

View Live Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2014/02/Fancy-Tooltips-with-CSS3.pnghttp://w3lessons.info/wp-content/uploads/2014/02/Fancy-Tooltips-with-CSS3-150x150.pngKarthikeyan KCSS3FreebiesCascading Style Sheets,CSS3,freebies,Tooltip
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 fancy tooltips using pure css3. FeaturesMultiple Colors Multiple Directions Pure CSS3 Works in Major BrowsersI have used pure css3 to implement multi color tooltips...