How to Create Simple CSS Tooltip

A tooltip provides extra information when user hover on the element. Tooltips are a great way to showing details information to the user by hovering a text or image and it helps to improve the user experience of your website. Using tooltips you can display image caption, 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. Also, you’ll be able to place the tooltip to the different position (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;
}