Hi friends in this article, I’m explaining about maketooltip using html and css.

Description:

A tooltipis a pop-up message that is shown when the user hovers the mouse over anelement such as a TextBox or a Button etcetera.

Observe thefollowing table. Here we have placed the Input (Text) controls (txtUsername,txtPassword) inside the anchor tag. We have added a class name (tooltip)to the anchor tag and given some text to the the alt attribute. Using an altattribute we will display a tooltip for the Input (Text) controls.

<table style="width: 270px;">
    <tr>
        <td>Username:
        </td>
        <td>
            <a href="#" alt="Please enter username" class="tooltip">
                <input id="txtUsername" type="text" /></a>
        </td>
    </tr>
    <tr>
        <td>Password:
        </td>
        <td>
            <a href="#" alt="Please enter password" class="tooltip">
                <input id="txtPassword" type="text" /></a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input id="Button1" type="button" value="Login" />
        </td>
    </tr>
</table>

Now our page looks in browser as follows

 

Now we willadd some CSS style to the anchor tags; see: 

.tooltip        {            display: inline;            position: relative;            text-decoration: none;            top: 0px;            left: 4px;        }

Now by usingthe anchor tags we will display the tooltip for the Input (Text) controls.
Observe the following style of the anchor tags:

        .tooltip:hover:after        {            background: #333;            background: rgba(0,0,0,.8);            border-radius: 5px;            top: -5px;            color: #fff;            content: attr(alt);            left: 160px;            padding: 5px 15px;            position: absolute;            z-index: 98;            width: 150px;        }

 

Preview

 

Here we areproviding a style whenever the user hover the mouse over the anchor tags.
We are specifying some style using the :after selector.
In the preceding style we have given a border and a border radius etcetera.
Here we have set thecontent attribute to content: attr(alt); this property will display the tooltipby using the alt attribute of the anchor tag.
Whatever you give to the alt tag of the anchor element it will bedisplayed as a tooltip.
Now we will add one arrow to the tooltip as follows using the :before selector:

       .tooltip:hover:before        {            border: solid;            border-color: transparentblack;            border-width: 6px 6px 6px 0;            bottom: 20px;            content: "";            left: 155px;            position: absolute;            z-index: 99;            top: 3px;        }

 

Preview

Finally script of our page is:

<style>
    .tooltip {
        display: inline;
        position: relative;
        text-decoration: none;
        top: 0px;
        left: 4px;
    }
 
        .tooltip:hover:after {
            background: #333;
            background: rgba(0,0,0,.8);
            border-radius: 5px;
            top: -5px;
            color: #fff;
            content: attr(alt);
            left: 180px;
            padding: 5px 15px;
            position: absolute;
            z-index: 98;
            width: 150px;
        }
 
        .tooltip:hover:before {
            border: solid;
            border-color: transparent black;
            border-width: 6px 6px 6px 0;
            bottom: 20px;
            content: "";
            left: 175px;
            position: absolute;
            z-index: 99;
            top: 3px;
        }
</style>

 

 

<table style="width: 270px;">
    <tr>
        <td>Username:
        </td>
        <td>
            <a href="#" alt="Please enter username" class="tooltip">
                <input id="txtUsername" type="text" /></a>
        </td>
    </tr>
    <tr>
        <td>Password:
        </td>
        <td>
            <a href="#" alt="Please enter password" class="tooltip">
                <input id="txtPassword" type="text" /></a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input id="Button1" type="button" value="Login" />
        </td>
    </tr>
</table>

 

Save thisscript as .html file or download the attachment and open in browser then mouseover on to the username and password Textboxes we will getthe tooltip as follows. 

Mouse over on to the Username Textbox.

Mouse over on to the Password Textbox

So this is thesimple way to display the tooltip using HTML and CSS.
We can use this tooltips procedure for images also.

in my next post i'll discuss about Design a simple, stylish calculator using HTML, CSS and JavaScript