---
title: "Simple Tooltip using HTML CSS"  
description: "Hi friends in this article, I’m explaining about make tooltip using html and css."  
author: "Anonymous User"  
published: 2014-11-14  
updated: 2026-05-13  
canonical: https://www.mindstick.com/articles/1529/simple-tooltip-using-html-css  
category: "css-css3"  
tags: ["css"]  
reading_time: 3 minutes  

---

# Simple Tooltip using HTML CSS

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](https://www.mindstick.com/articles/66/how-to-create-controls-at-run-time-in-csharp-dot-net) (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

**![Simple Tooltip using HTML CSS](https://www.mindstick.com/mindstickarticle/280c6c81-dcc6-4b16-adfc-6a00a5edd85e/images/3ab86883-04e4-47d4-abaf-453b4c7d682b.png)**

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

**![Simple Tooltip using HTML CSS](https://www.mindstick.com/mindstickarticle/280c6c81-dcc6-4b16-adfc-6a00a5edd85e/images/01609f9e-61da-41b7-86ac-4fba1c10188e.png)**

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

**![Simple Tooltip using HTML CSS](https://www.mindstick.com/mindstickarticle/280c6c81-dcc6-4b16-adfc-6a00a5edd85e/images/73bb42e5-f6b6-4de6-a6e2-bdbc10fd79d4.png)**

##### 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](https://www.mindstick.com/forum/160407/how-does-a-bearer-token-differ-from-other-authentication-methods-such-as-username-and-password) [Textboxes](https://www.mindstick.com/forum/34206/how-to-add-5-dynamic-textboxes-in-wpf-and-how-to-write-binding-in-c-sharp) we will getthe tooltip as follows.

**Mouse over on to the Username Textbox.**

**![Simple Tooltip using HTML CSS](https://www.mindstick.com/mindstickarticle/280c6c81-dcc6-4b16-adfc-6a00a5edd85e/images/62a490a8-7bb2-4000-940c-8ac52300a5e0.png)**

## Mouse over on to the Password Textbox

**![Simple Tooltip using HTML CSS](https://www.mindstick.com/mindstickarticle/280c6c81-dcc6-4b16-adfc-6a00a5edd85e/images/df49cc2d-0244-435d-982b-0d7dbb7e71dd.png)**

So this is thesimple way to display the tooltip using HTML and CSS.\
We can use this tooltips [procedure](https://www.mindstick.com/blog/304484/explain-the-sql-stored-procedures) for images also.

in my next post i'll discuss about Design a simple, stylish [calculator](https://www.mindstick.com/articles/38/calculator-in-asp-dot-net-using-javascript) using HTML, CSS and [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript)

---

Original Source: https://www.mindstick.com/articles/1529/simple-tooltip-using-html-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.