How to Create Tooltip with CSS

A tooltip provides extra information when the user hovers over the element. Tooltips are a great way to show details information to the user by hovering over a text or image and it helps to improve the user experience of your website. Using tooltips you can display image captions, description for links, and useful information. You can easily create a tooltip with CSS without using JavaScript or jQuery.

In this tutorial, we will show you how to create tooltip on hover text or image using pure CSS. Here we’ll provide a short code snippet to create simple CSS tooltip that appears when the user moves the mouse pointer over a text with fade in animation. Also, you’ll be able to place the tooltip in the different positions (Top, Bottom, Left, and Right) of hoverable text.

HTML Code

Add tooltip class to text with tooltip position class (top or bottom or left or right) on which tooltip would appear and assign tiptext class on tooltip content.

<div class="tooltip top">Hover over me
    <span class="tiptext">CSS Tooltip text</span>
</div>

CSS Code

The following CSS would be same for all tooltips position.

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}

Along with the above CSS use any one of the below CSS.
Top Tooltip CSS:

.tooltip.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.top .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #2E2E2E transparent transparent transparent;
}

Bottom Tooltip CSS:

.tooltip.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltip.bottom .tiptext::after{
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #2E2E2E transparent;
}

Left Tooltip CSS:

.tooltip.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent #2E2E2E;
}

Right Tooltip CSS:

.tooltip.right .tiptext{
    top: -5px;
    left: 110%;
}
.tooltip.right .tiptext::after{
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent #2E2E2E transparent transparent;
}