CODEWITHSUNDEEP
htmlcss
rigdonmr
rigdonmr

Reputation: 2702

An absolute div inside an inline-block, relative parent div takes width of sibling

Consider this markup & styles:

.container {
  border: 1px dashed red;
  position: relative;
  display: inline-block;
}

.sibling {
  border: 1px dashed green;
}

.tooltip {
  border: 1px dashed purple;
  position: absolute;
  max-width: 100px;
}
<div class="container">
  <div class="sibling">
    sibling
  </div>
  <div class="tooltip">
    Some text look how skinny it is
  </div>
</div>

Here's a codepen with the exact stuff

Basically the tooltip seems to take on the width of the sibling--Boooo! I want the tooltip to not have a width at all.

If I remove display: inline-block; from the container, the issue is no longer present, but I need the container to be inline-block. So my question is how do I add an absolute positioned div to an inline-block, relative positioned parent div, without the absolute div breaking its text at the width of a sibling div.

Edit

The tooltip should also support having a max-width if needed so white-space: nowrap; won't work :(

Upvotes: 0

Views: 309

Answers (4)

fubar
fubar

Reputation: 17388

Have you tried simply removing the position: relative from the parent?

Assuming you want the tooltip to show when hovering over the sibling, you could use the following:

.container {
  border: 1px dashed red;
  display: inline-block;
  margin: 50px;
  position: relative;
}

.sibling {
  border: 1px dashed green;
}

.tooltip {
  display: none;
  position: absolute;
  width: 100vh;
}

.tooltip .content {
  border: 1px dashed purple;
  display: inline-block;
  padding: 3px;
}

.sibling:hover ~ .tooltip {
  display: block;
}
<div class="container">
  <div class="sibling">
    sibling
  </div>
  <div class="tooltip">
    <div class="content">
      Some text
    </div>
  </div>
</div>

<div class="container">
  <div class="sibling">
    another sibling
  </div>
  <div class="tooltip">
    <div class="content">
      Lorem ipsum dolor sit amet, no vivendum iudicabit per, libris elaboraret ei qui. Mei cibo mollis repudiandae et. Vix ne unum docendi rationibus, doming doctus scripta mei ea. Sed ne zril integre sanctus, cu doming semper omittantur mea. Te adhuc falli ius. Eam ad ceteros nostrum perpetua.
    </div>
  </div>
</div>

Upvotes: 1

Shubhi Sood
Shubhi Sood

Reputation: 420

Try Updating tooltip CSS to:

.tooltip {
  border: 1px dashed purple;
  position: absolute;
  max-width: 300px;
  white-space: nowrap; /* add this property.*/
  overflow: hidden; /* add this property.*/
}

or Update CSS to 

.tooltip {
  border: 1px dashed purple;
  position: absolute;
  width: 300px;
}

Change max-width property to width property.

Upvotes: 0

Carol McKay
Carol McKay

Reputation: 2424

 .tooltip {
      border: 1px dashed purple;
      position: absolute;
      white-space:nowrap; /* added */
    }

Upvotes: 0

sinbar
sinbar

Reputation: 1063

Are you mean you want the text in tooltip open the tooltip? just add a white-space: nowrap; to the .tooltip.

Upvotes: 0

Related Questions