A Simple Introduction To CSS Tooltips With Easy-to-use Examples!

Tooltips

When a user hovers their mouse pointer over an element, CSS tooltips are a terrific method to show more information about that object.

Simple Tooltips Example

Let's build a simple tooltip that appears when the mouse pointer passes over a particular element. Observe the following example:

<!DOCTYPE html>  

<html>  

<style>  

.tooltip {  

    position: relative;  

    display: inline-block;  

    border-bottom: 1px dotted red;  

}  

.tooltip .tooltiptext {  

    visibility: hidden;  

    width: 120px;  

    background-color: green;  

    color: #fff;  

    text-align: center;  

    border-radius: 6px;  

    padding: 5px 0;  

    position: absolute;  

    z-index: 1;  

}  

.tooltip:hover .tooltiptext {  

    visibility: visible;  

}  

</style>  

<body style="text-align:center;">  

<p>Move the mouse over the text below to see the effect:</p>  

<div class="tooltip">Hey you! Hover here! 

  <span class="tooltiptext">This is tooltip text example</span>  

</div>  

</body>  

</html>

When you use tooltips, you can effectively display in four ways, the position of the tooltip information:

  • The top of the element
  • The left side of the element
  • The right side of the element
  • The bottom of the element

Top Tooltips

The top tooltip indicates that the information will be displayed on top of the element when the mouse pointer hovers over it.

Observe this example:

<!DOCTYPE html>  

<html>  

<style>  

.tooltip {  

    position: relative;  

    display: inline-block;  

    border-bottom: 1px dotted red;  

}  

.tooltip .tooltiptext {  

    visibility: hidden;  

    width: 120px;  

    background-color: green;  

    color: #fff;  

    text-align: center;  

    border-radius: 6px;  

    padding: 5px 0;  

    position: absolute;  

    z-index: 1;  

    bottom: 100%;  

    left: 50%;  

    margin-left: -60px;  

}  

.tooltip:hover .tooltiptext {  

    visibility: visible;  

}  

</style>  

<body style="text-align:center;">  

<h2>The top Tooltip Example</h2>  

<p>Move your mouse cursor over the below heading to see the effect</p>  

<div class="tooltip"><strong> Welcome to HubToLearn</strong>  

  <span class="tooltiptext">The best technology education site.</span>  

</div>  

</body>  

</html>

Bottom Tooltips

The bottom tooltip indicates that the information will be displayed at the bottom of the element when the mouse pointer hovers over it.

Observe this example:

<!DOCTYPE html>  

<html>  

<style>  

.tooltip {  

    position: relative;  

    display: inline-block;  

    border-bottom: 1px dotted red;  

}  

  

.tooltip .tooltiptext {  

    visibility: hidden;  

    width: 120px;  

    background-color: green;  

    color: #fff;  

    text-align: center;  

    border-radius: 6px;  

    padding: 5px 0;  

    position: absolute;  

    z-index: 1;  

    top: 100%;  

    left: 50%;  

    margin-left: -60px;  

}  

.tooltip:hover .tooltiptext {  

    visibility: visible;  

}  

</style>  

<body style="text-align:center;">  

<h2>The bottom Tooltip Example</h2>  

<p>Move your mouse cursor over the below heading to see the effect</p>  

<div class="tooltip"><strong> Welcome to HubToLearn</strong>  

<span class="tooltiptext">The best technology education site.</span>  

</div>  

</body>  

</html>

Left Tooltips

The left tooltip indicates that the tooltip information will then appear on the left side of the element when the mouse pointer is over it.

Observe this example:

<!DOCTYPE html>  

<html>  

<style>  

.tooltip {  

    position: relative;  

    display: inline-block;  

    border-bottom: 1px dotted red;  

}  

.tooltip .tooltiptext {  

    visibility: hidden;  

    width: 120px;  

    background-color: green;  

    color: #fff;  

    text-align: center;  

    border-radius: 6px;  

    padding: 5px 0;  

    position: absolute;  

    z-index: 1;  

    top: -5px;  

    right: 105%;  

}  

.tooltip:hover .tooltiptext {  

    visibility: visible;  

}  

</style>  

<body style="text-align:center;">  

<h2>The left Tooltip Example</h2>  

<p>Move your mouse cursor over the below heading to see the effect</p>  

<div class="tooltip"><strong> Welcome to HubToLearn</strong>  

<span class="tooltiptext">The best technology education site.</span>  

</div>  

</body>  

</html>

Right Tooltip

The right tooltip indicates that the tooltip information appears on the right side of the element if you move your mouse cursor over it.

Observe this example:

<!DOCTYPE html>  

<html>  

<style>  

.tooltip {  

    position: relative;  

    display: inline-block;  

    border-bottom: 1px dotted red;  

}  

.tooltip .tooltiptext {  

    visibility: hidden;  

    width: 120px;  

    background-color: green;  

    color: #fff;  

    text-align: center;  

    border-radius: 6px;  

    padding: 5px 0;  

    position: absolute;  

    z-index: 1;  

    top: -5px;  

    left: 105%;  

}  

.tooltip:hover .tooltiptext {  

    visibility: visible;  

}  

</style>  

<body style="text-align:center;">  

<h2>The Right Tooltip Example</h2>  

<p>Move your mouse cursor over the below heading to see the effect</p>  

<div class="tooltip"><strong> Welcome to HubToLearn</strong>  

<span class="tooltiptext">The best technology education site.</span>  

</div>  

</body>  

</html>

To learn more about CSS, visit our CSS Tutorial Page.