How to Create Simple CSS Tooltip

A tooltip gives additional data when client drift on the component. Tooltips are an incredible method to demonstrating subtleties data to the client by drifting a book or picture and it assists with improving the client experience of your site. Utilizing tooltips you can show picture subtitle, depiction for joins, and valuable data. You can undoubtedly make a tooltip with CSS without utilizing JavaScript or jQuery.

In this instructional exercise, we will tell you the best way to make tooltip on drift text or picture utilizing unadulterated CSS. Here we’ll give a short code piece to make basic CSS tooltip that shows up when the client moves the mouse pointer over a book. Likewise, you’ll have the option to put the tooltip to the distinctive position (Top, Bottom, Left, and Right) of hover able content.

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.

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

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;
}