Article Categories

Selected Reading

How to position tooltips correctly with CSS

CSS Web Development Front End Technology

CSS tooltip positioning allows you to control exactly where tooltips appear relative to their trigger elements. By using positioning properties like top, right, bottom, and left, you can create tooltips that display in any direction.

Syntax

.tooltip {
    position: relative;
}

.tooltip .tooltip-text {
    position: absolute;
    top: value;
    left: value;
    right: value;
    bottom: value;
}

Method 1: Right-Positioned Tooltip

The following example positions the tooltip to the right of the trigger element −

<!DOCTYPE html>
<html>
<head>
<style>
    .tooltip {
        position: relative;
        display: inline-block;
        background-color: #f0f0f0;
        padding: 10px;
        border: 1px solid #ccc;
        cursor: pointer;
    }
    
    .tooltip .tooltip-text {
        visibility: hidden;
        width: 140px;
        background-color: #333;
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top: -6px;
        left: 105%;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
</style>
</head>
<body>
    <div class="tooltip">Hover over me
        <span class="tooltip-text">Right-positioned tooltip</span>
    </div>
</body>
</html>

A gray button appears. When you hover over it, a dark tooltip with white text appears to the right of the button with a smooth fade-in effect.

Method 2: Top-Positioned Tooltip

This example shows how to position tooltips above the trigger element −

<!DOCTYPE html>
<html>
<head>
<style>
    .tooltip-top {
        position: relative;
        display: inline-block;
        background-color: #4CAF50;
        color: white;
        padding: 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 50px;
    }
    
    .tooltip-top .tooltip-text {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .tooltip-top:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
</style>
</head>
<body>
    <div class="tooltip-top">Hover for top tooltip
        <span class="tooltip-text">Top tooltip text</span>
    </div>
</body>
</html>

A green button appears with top margin. When hovered, a dark tooltip appears centered above the button with a fade-in transition.

Method 3: Bottom and Left Positioning

This example demonstrates bottom and left tooltip positioning −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        gap: 50px;
        margin: 50px;
    }
    
    .tooltip-demo {
        position: relative;
        display: inline-block;
        background-color: #ff6b6b;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .tooltip-bottom .tooltip-text {
        visibility: hidden;
        width: 160px;
        background-color: #333;
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top: 125%;
        left: 50%;
        margin-left: -80px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .tooltip-left .tooltip-text {
        visibility: hidden;
        width: 140px;
        background-color: #333;
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top: -6px;
        right: 105%;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .tooltip-demo:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="tooltip-demo tooltip-bottom">Bottom Tooltip
            <span class="tooltip-text">Appears below</span>
        </div>
        <div class="tooltip-demo tooltip-left">Left Tooltip
            <span class="tooltip-text">Appears to the left</span>
        </div>
    </div>
</body>
</html>

Two red buttons are displayed side by side. The first shows a tooltip below when hovered, and the second shows a tooltip to the left when hovered.

Key Properties for Tooltip Positioning

Position	Properties Used	Description
Right	`left: 105%`	Places tooltip to the right of element
Left	`right: 105%`	Places tooltip to the left of element
Top	`bottom: 125%`	Places tooltip above the element
Bottom	`top: 125%`	Places tooltip below the element

Conclusion

Proper tooltip positioning in CSS relies on using position: absolute on the tooltip text and position: relative on the container. The top, right, bottom, and left properties control the exact positioning, while percentage values ensure responsive placement.

Nitya Raut

Updated on: 2026-03-15T12:47:23+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next