Colored Tooltip

Explore simple and customizable colored tooltip examples with CSS. Learn how to create responsive tooltips in various positions—top, bottom, left, and right—using only HTML and CSS.

Preview
Code

<h1>Colored Tooltip Examples</h1>

    <div class="tooltip-container">
        <div class="tooltip bottom">Bottom Tooltip
            <span class="tooltiptext">Tooltip text</span>
        </div>
        <div class="tooltip top">Top Tooltip
            <span class="tooltiptext">Tooltip text</span>
        </div>
    </div>

    <div class="tooltip-container">
        <div class="tooltip left">Left Tooltip
            <span class="tooltiptext">Tooltip text</span>
        </div>
        <div class="tooltip right">Right Tooltip
            <span class="tooltiptext">Tooltip text</span>
        </div>
    </div>

body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f0f0f0;
        }

        h1 {
            margin-bottom: 30px;
        }

        .tooltip-container {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }

        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            cursor: pointer;
            padding: 10px;
            background-color: #ffffff;
            border-radius: 4px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        /* Tooltip colors and positions */
        .tooltip.bottom .tooltiptext {
            top: 100%;
            left: 50%;
            margin-left: -60px;
            background-color: yellow; /* Yellow for bottom tooltip */
            color: black
        }

        .tooltip.top .tooltiptext {
            bottom: 100%;
            left: 50%;
            margin-left: -60px;
            background-color: red; /* Red for top tooltip */
        }

        .tooltip.left .tooltiptext {
            top: -5px;
            right: 105%;
            background-color: blue; /* Blue for left tooltip */
        }

        .tooltip.right .tooltiptext {
            top: -5px;
            left: 105%;
            background-color: green; /* Green for right tooltip */
        }

```
No need of JavaScript
```

Introduction

Tooltips are an essential part of enhancing user experience on a website. They provide additional information when a user hovers over or focuses on an element. In this example, we'll explore different colored tooltips positioned around their corresponding elements. The tooltips in this guide are created using only HTML and CSS, making them lightweight and easy to implement.

Key Features

Simple Implementation: Tooltips are created using basic HTML and CSS without any dependencies.
Customizable Colors: Each tooltip can have a different background color, easily adjustable via CSS.
Flexible Positioning: Tooltips can be positioned on the top, bottom, left, or right of the element.
Responsive Design: The tooltips are designed to work well on various screen sizes, adapting to the viewport.

Implementation Steps

Create the HTML Structure: Define a container to hold the tooltip elements and text.
Style the Tooltips: Use CSS to style the tooltips, including their position, background color, and visibility.
Add Hover Effect: Implement a hover effect using CSS to display the tooltip when the user hovers over the element.
Position the Tooltips: Adjust the CSS to position the tooltips on the top, bottom, left, or right of the element.

Code Explanation

The HTML structure consists of a tooltip-container that holds each tooltip element. Each tooltip has a tooltiptext element inside, which is the actual tooltip text.

<div class="tooltip-container">
    <div class="tooltip bottom">Bottom Tooltip
        <span class="tooltiptext">Tooltip text</span>
    </div>
    <div class="tooltip top">Top Tooltip
        <span class="tooltiptext">Tooltip text</span>
    </div>
</div>

In the CSS, each tooltip is initially hidden by setting the visibility to hidden and opacity to 0. When the user hovers over the tooltip, these properties change to display the tooltip.

.tooltip.bottom .tooltiptext {
    top: 100%;
    left: 50%;
    margin-left: -60px;
    background-color: yellow;
}

The position of the tooltip is controlled by the classes top, bottom, left, and right. Each class positions the tooltip relative to the hovered element, with additional styling for color and alignment.

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Conclusion

Tooltips are a simple yet effective way to enhance user interaction on your website. By using CSS, you can easily customize the appearance and position of your tooltips to suit your design needs. Feel free to experiment with different colors and positions to create a unique experience for your users.

Thank you for reading! If you're interested in more CSS tips and tricks, check out our Tooltip Examples guide for further customization ideas.