Question 225050 in Html Question posted in
Some basic documentation can be found here.

Html – Trouble Adding Arrow Icon to Tooltip-Wrapper

I’m attempting to add an arrow icon to a tooltip-wrapper using HTML and CSS, but I’m encountering difficulties getting the arrow icon to display properly. I’ve followed multiple approaches and suggestions, but the arrow icon remains invisible. I’d greatly appreciate some guidance on what might be causing this issue.

Eventually I’m trying to to smth like in this image.

enter image description here

What I’ve Tried:

Added a ::after pseudo-element with appropriate styling to the .tooltip-wrapper class.

  • Experimented with different border styles, colors, and dimensions for the arrow icon.
  • Ensured the pseudo-element has content and dimensions using content: ”;, width: 0;, and height: 0;.

The problem looks like to occure because of the overflow-auto.
Do I need another wrapper element?

.parent {
  display: inline-flex;
  position: relative;
  font-weight: 900;
}

.tooltip-wrapper {
  display: none;
  position: absolute;
  overflow: auto;
  max-height: 20px;
  max-width: 200px;
  width: max-content;
  padding: 10px;
  bottom: 10px;
  background-color: blue;
}

.parent:hover .tooltip-wrapper {
  display: block;
}

.tooltip-content {
  font-weight: normal;
  color: white;
}

.tooltip-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: red transparent red transparent;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <section>
      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      <div class="parent">
        <span class="tooltip-wrapper">
          <span class="tooltip-content">
            sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
            aliquyam
          </span>
        </span>
        hello world
      </div>
      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
      dolor sit amet.
    </section>

    <script src="./src/index.js"></script>
  </body>
</html>

Here is sandbox link to play around

Tags:

2

Answers


  1. 0

    The code and the implementation is good ,but i suggest you to change the border-color field in .tooltip-wrapper::after to this.

    border-color: red transparent red transparent;

    Try this and let me know that it fixed or not.

    Login or Signup to reply.
  2. 0

    I positioned the arrow icon to the tooltip-wrapper like you showed in the sample. Necessary comments are added inside the codes.

        .parent {
        display: inline-flex;
        position: relative;
        font-weight: 900;
        /* adding some margin on the top */
        top: 10px;
    }

    .tooltip-wrapper {
        /* display: none; */
        position: absolute;
        overflow: auto;
        max-height: 20px;
        max-width: 200px;
        width: max-content;
        padding: 10px;
        bottom: 10px;
        background-color: blue;
        border-radius: 10px;
    }

    .parent:hover .tooltip-wrapper {
        display: block;
    }

    .tooltip-content {
        font-weight: normal;
        color: white;
    }

    .parent::after {
        content: "";
        position: absolute;
        bottom: 0;
        /* left: 50%; */
        /* transform: translateX(-50%); */
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8px 10px 8px;
        border-color: blue transparent blue transparent;
        /* for vertical flip */
        transform: scaleY(-1);
        -webkit-transform: scaleY(-1);

        /* left positioning */
        left: 110px;
    }

    /* bottom blue background */
    .parent::before{
        content: "";
        position: absolute;
        width: 190px;
        height: 10px;
        background: blue;
        left: 9px;
        bottom: 10px;
        z-index: 1;
    }
    <section>
  ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
  clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
  amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  <div class="parent">
    <span class="tooltip-wrapper">
      <span class="tooltip-content">
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam
      </span>
    </span>
    hello world
  </div>
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
  rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
  dolor sit amet.
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search