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

Html – CSS Tooltip's Max-Width Not Taking Effect

I’m working on a tooltip component, and I’m trying to make the tooltip’s content grow until its max-width is reached, regardless of the width of its parent element. Here’s the relevant part of my CSS code:

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

.parent:hover .child {
  display: block;
}

.child {
  display: none;
  position: absolute;
  bottom: 10px;
  font-weight: normal;
  background-color: black;
  color: white;
  height: 20px;
  max-width: 400px;
  width: auto;
  overflow: auto;
  padding: 10px;
}

Despite setting max-width to 400px, the tooltip’s content is not expanding as intended and seems to be limited by the width of its parent element (bwre-tooltip).

Despite setting max-width to 400px, the tooltip’s content is not expanding as intended and seems to be limited by the width of its parent element (bwre-tooltip).

I’ve already tried a few solutions, such as changing the width property to auto or max-content, but these adjustments didn’t yield the desired result. Additionally, I’ve checked that there are no conflicting CSS rules affecting the tooltip’s width.

Am I missing something? Is there a specific CSS property or technique that I should be using to ensure that the tooltip’s content grows until its max-width is reached, regardless of the parent element’s width?

Any insights, suggestions, or alternative approaches to achieving this behavior would be greatly appreciated. Thank you in advance for your help!

Additional Context:

Here’s the relevant HTML structure:

 <section>
      ipsum ...
      <div class="parent">
        <span class="child">
          sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
          aliquyam
        </span>
        hello world
      </div>
      ...
    </section>

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

.parent:hover .child {
  display: block;
}

.child {
  display: none;
  position: absolute;
  bottom: 10px;
  font-weight: normal;
  background-color: black;
  color: white;
  height: 20px;
  max-width: 400px;
  width: auto;
  overflow: auto;
  padding: 10px;
}
<!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="child">
          sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
          aliquyam
        </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>

In addition here is also sandbox link

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found this solution adding this style to child element: margin: 0 -100%;

    But @wing's answer looks like a better answer.


  2. 0

    What I understand is that you have to use box-sizing: border-box; in your tooltip.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search