articles

Home / DeveloperSection / Articles / Simple Tooltip using HTML CSS

Simple Tooltip using HTML CSS

Anonymous User8780 14-Nov-2014

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

Description:

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

Observe the following 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 alt attribute we will display a tooltip for the Input (Text) controls.

<tablestyle="width: 270px;">
    <tr>
        <td>Username:
        </td>
        <td>
            <ahref="#"alt="Please enter username"class="tooltip">
                <inputid="txtUsername"type="text"/></a>
        </td>
    </tr>
    <tr>
        <td>Password:
        </td>
        <td>
            <ahref="#"alt="Please enter password"class="tooltip">
                <inputid="txtPassword"type="text"/></a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <inputid="Button1"type="button"value="Login"/>
        </td>
    </tr>
</table>
Now our page looks in browser as follows

 

Simple Tooltip using HTML CSS

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

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

Now by using the 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

Simple Tooltip using HTML CSS

 

Here we are providing 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 the content attribute to content: attr(alt); this property will display the tooltip by using the alt attribute of the anchor tag.
Whatever you give to the alt tag of the anchor element it will be displayed 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: transparent
black;
            border-width: 6px 6px 6px 0;
            bottom: 20px;
            content: "";
            left: 155px;
            position: absolute;
            z-index: 99;
            top: 3px;
        }

 

Preview

Simple Tooltip using HTML CSS

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: 5px15px;
            position: absolute;
            z-index: 98;
            width: 150px;
        }
 
        .tooltip:hover:before {
            border: solid;
            border-color: transparentblack;
            border-width: 6px6px6px0;
            bottom: 20px;
            content: "";
            left: 175px;
            position: absolute;
            z-index: 99;
            top: 3px;
        }
</style>

 

 

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

 

Save this script as .html file or download the attachment and open in browser then mouse over on to the username and password Textboxes we will get the tooltip as follows. 

Mouse over on to the Username Textbox.

Simple Tooltip using HTML CSS

Mouse over on to the Password Textbox

Simple Tooltip using HTML CSS

So this is the simple 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


Updated 19-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By