CSS Tooltip

CSS Tooltip

Tooltips are a great way to show your user more information by simply hovering over an image or text. They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site, without intruding on the design.

Today I’m going to show you how to create a simple tooltip using HTML and CSS to display the title tag of your hyperlinks.

Demo: Tooltip Example:

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:

Positioning Tooltips:

In CSS four types of positioning tooltips are as follows:

1) Right Tooltip

Example

    <!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
 <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Try it with the Editor

2) Left Tooltip

Example

    <!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
 <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Try it with the Editor

3) Top Tooltip

Example

    <!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
 <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Try it with the Editor

4) Bottom Tooltip

Example

    <!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
 <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Try it with the Editor