Open In App

How to Change the Tooltip Position to Left-Right ?

Last Updated : 19 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The tooltip is a hint which 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 left-right using the CSS left and right properties.

Approach

  • Create the layout of the page with the appropriate class name in HTML.
  • Apply appropriate styling to the element and the tooltip text.
  • Position the tooltip absolute and use CSS left, and CSS right positioning properties to position the tooltip to the left and right side of the element.
  • Set the visibility property to hidden for the tooltip text.
  • Apply the 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 named “index.html” and a CSS file named “style.css” 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 left-right</title>
</head>

<body>
    <header>
        <h1>GeeksforGeeks</h1>
        <p>Tooltip position to left-right</p>
    </header>
    <main>
        <div class="content">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230913133830/GFG.jpg" 
                 alt="GFG logo">
            <p class="tooltip left">
                  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 right">
                  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;
    /* Adjust margin for smaller screens */
}

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

header p {
    font-size: 2rem;
    flex-wrap: wrap;
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

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

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

.tooltip {
    visibility: hidden;
    position: absolute;
    top: 40%;
    font-size: 1.5rem;
    padding: .5rem 1rem;
    color: white;
    background-color: green;
    border-radius: .2rem;
    transform-style: preserve-3d;
}

.left {
    left: -65%;
}

.right {
    right: -100%;
}

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

.left::after {
    right: -11%;
}

.right::before {
    left: -7%;
}

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

.content:hover .left,
.content:hover .right {
    visibility: visible;
}

/* Media Queries */
@media screen and (max-width: 600px) {
    header {
        margin-top: 3rem;
        font-size: 10px;
    }

    main {
        height: 200px;
        width: 200px;
        margin-top: 2rem;
        /* margin-left: 6rem; */
    }
}

@media screen and (max-width: 500px) {
    .content {
        width: min(250px, 95%);
    }

    header {
        display: flex;
        justify-content: center;
        font-size: 8px;
    }
}

@media screen and (max-width: 400px) {
    .content {
        width: min(250px, 100%);
    }

    .tooltip {
        font-size: 10px;
    }
}

Output:

cde



Similar Reads

Foundation CSS Tooltip Right and Left
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is b
3 min read
How to Change the Tooltip Position to Top-Bottom ?
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. ApproachCreate the layout of the page with appropriate class name in
2 min read
jQuery UI Tooltip position Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and, jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Tooltip position option is used to set the position of Tooltip in relation to the associated target element. Syntax: $( ".selector" ).tooltip({ position: { my: "left+15
1 min read
How to Position Tooltip in button using Bootstrap ?
In Bootstrap 4, you can position the tooltip in various directions (left, right, top, bottom). The positioning of the tooltip is set by using the third-party library (Popper.js) before bootstrap.js in order for the tooltip to work. Approach: The required markup for positing tooltip is on data-placement where you can set the tooltip to BottomRightTo
3 min read
How to set position of tooltip in a button in Bootstrap ?
A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. For Example, in the below image GeeksForGeeks is a button and when the user mouse moves over it, the additional information "A computer Science Portal" popup will display. We are going to learn how to create a tooltip and how to p
2 min read
How to make a Tooltip with a Left Arrow ?
A tooltip is a small pop-up box, text, or image that appears when a user hovers over an element such as a button, link, or image. Tooltips are often used to provide additional information about the element or give the user context. We will explore how to make a tooltip with a left arrow on the Image and text. ApproachThe HTML creates a tooltip cont
3 min read
How to Make a Tooltip With an Right Arrow ?
Tooltips are used to display the additional information along with the links on the web pages. It adds enhancement and increases the overall user experience while using the application. Below are the approaches to make a tooltip with an right arrow: Table of Content Using CSS Pseudo-elementsUsing SVGUsing CSS Pseudo-elementsIn this approach, we are
3 min read
How to change color of tooltip element using Bootstrap ?
In this article, we will see how to change the color of the tooltip element using Bootstrap. A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage. Now, let’s learn how to create a tooltip
2 min read
What is the difference between position:sticky and position:fixed in CSS ?
In CSS, position: sticky and position: fixed both offer elements the ability to stay in a fixed position during scrolling. These two CSS properties, while seemingly similar, have distinct behaviors that can significantly impact the layout and user experience of a webpage. This article will tell you the differences, providing you more understanding
6 min read
How to set position relative to left of a canvas circle using Fabric.js ?
In this article, we are going to see how to position relative to the left of a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible, we are goi
2 min read