September 25, 2014 5:39 pm

How to create a simple tooltip in CSS3

In this tutorial you will know that how you can create a simple css3 based tooltip. Tooltips are great help for your users to know details of options you offered in your website on hover at question mark or help text. Can be used to explain longer descriptions or details of any link, input box or anything else you want to give extra information. Tooltip improve user experience of your site.

How to create a simple tooltip in CSS

[wpdm_file id=115]DEMO

Let’s write some markup

<div class="tooltip">
    <p>PHPGang.com tooltip tutorial</p>
</div>

Everything in <p> tag will be displayed as tooltip information  and .tooltip div show question mark in a circle on hover it shows information inside <p>. You can put anything inside the tooltip information like HTML, images…

Your information paragraph hidden by default but it will be visible on hover.

CSS

<style type="text/css">
html{
    background-color:hsl(75, 70%, 92%);
}

body{
    font:14px 'Arial', 'Helvetica', sans-serif;
    color: hsl(201, 100%, 38%);
}
.tooltip{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.tooltip-h{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 20%;
    width: 30px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.tooltip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}
.tooltip-h:before{
    content:'help';
    font-weight: bold;
    color:#fff;
}

.tooltip:hover p, .tooltip-h:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.tooltip p, .tooltip-h p{    
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.tooltip p:before, .tooltip-h p:before{ 
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.tooltip p:after, tooltip-h p:after{ 
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}
#content {
    background-color: hsl(75, 1%, 92%);
    border-radius: 4px;
    padding: 40px;
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    margin: 0 auto 100px;
}
</style>

I have added 2 classes .tooltip show question mark and .tooltip-h show help text. CSS animation added to show tooltip for nice effects with keyframes and -webkit-keyframes added for chrome support.

I hope it helps you guyz to improve your user interface and make it well documented.

Do share it and let your friend’s know about it.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

One response to “How to create a simple tooltip in CSS3”

  1. Yakk says:

    Great sample. Thanks a lot.

Leave a Reply

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