How to Change the Tooltip Position to Top-Bottom ?

Last Updated : 19 Mar, 2024

The tooltip is a hint that appears when you hover over an element in the User Interface. You can easily create a tooltip using HTML and CSS by changing the visibility property and hover selector. The tooltip can be positioned top-bottom using the CSS top and CSS bottom properties.

Approach

Create the layout of the page with appropriate class name in HTML.
Apply appropriate styling to the element and the tooltip text.
Position the tooltip absolute and use top, bottom positioning properties to position the tooltip to the top and bottom side of the element.
Set the visibility property to hidden for the tooltip text.
Apply hover selector to the element and set the visibility property to visible, so that on hovering the element the tooltip appears.

Example: Create an HTML file and a CSS file and write the following codes.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <link rel="stylesheet"
          href="style.css">
    <title>Change Tooltip position to top-bottom</title>
</head>

<body>
    <header>
        <h1>GeeksforGeeks</h1>
        <p>Tooltip position to top-bottom</p>
    </header>
    <main>
        <div class="content">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230913133830/GFG.jpg"
                 alt="GFG logo">
            <p class="tooltip top">GFG logo</p>
        </div>
        <div class="content">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121512/gfg1.jpg" 
                 alt="GFG Practice">
            <p class="tooltip bottom">GFG Practice logo</p>
        </div>
    </main>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(47, 255, 141);
    color: white;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
}

/* GFG Heading */
header h1 {
    font-size: 4rem;
    background-color: #fff;
    color: green;
    border-radius: 3rem;
    padding: .5rem 1.5rem;
    margin-bottom: 2rem;
}

header p {
    font-size: 3rem;
}

main {
    display: flex;
    gap: 5vw;
    margin-top: 10rem;
}

.content {
    width: min(250px, 30vw);
    height: min(200px, 25vw);
    position: relative;
    border: 2px solid green;
    cursor: pointer;
}

.content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tooltip {
    visibility: hidden;
    position: absolute;
    width: 100%;
    padding: .5rem 1rem;
    text-align: center;
    font-size: min(1.5rem, 2vw);
    color: white;
    background-color: green;
    border-radius: .2rem;
    transform-style: preserve-3d;
}

.top {
    top: -40%;
}

.bottom {
    bottom: -40%;
}

/* Arrows */
.top::after,
.bottom::before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateZ(-1px) rotateZ(45deg);
    background-color: green;
}

.top::after {
    bottom: -30%;
}

.bottom::before {
    top: -30%;
}

.content:hover {
    outline: 5px solid green;
}

.content:hover .top,
.content:hover .bottom {
    visibility: visible;
}