Width of element not increasing to max-width

Question

In the snippet below, I have assigned a max-width of 400px to the tooltip. It width it has is much less than that. Why doesn't the tooltip have 400px width? I do not want to explicitly assign it 400px as width because if the content is low, it should have 120px as the width (which is the min-width).

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

.select {
  position: relative;
  height: 30px;
  background: black;
  color: white;
  padding: 10px 20px;
  line-height: 30px;
}

.tooltip {
  display: none;
}
.tooltip:after {
  position: absolute;
  bottom: 100%;
  left: 100%;
  margin-bottom: 30px;
  margin-left: -20px;
  display: block;
  content: attr(title);
  background: red;
  color: white;
  line-height: 16px;
  font-size: 14px;
  padding: 12px;
  min-width: 120px;
  max-width: 400px;
}
.tooltip:before {
  position: absolute;
  bottom: 100%;
  left: 100%;
  content: '';
  height: 0;
  width: 0;
  border-top: 6px solid red;
  border-bottom: 6px solid transparent;
  border-left: 9px solid red;
  border-right: 9px solid transparent;
  margin-left: -20px;
  margin-bottom: 21px;
}

.tooltip.active {
  display: block;
}

<div class="select">
  <div class="tooltip active" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quam, voluptatem aliquam quos, soluta nostrum repellat unde magni voluptatibus placeat vitae numquam voluptatum ab temporibus id illo. Voluptatem, iusto, incidunt?"></div>
  I have a tooltip
</div>

Because that's not the way max-width works on absolutely positioned elements. It will default to the min-width and wrap accordingly. You can tell the element not to wrap the text but then the max-width will not be respected. — Paulie_D, Apr 24 '16 at 18:52
Related - http://stackoverflow.com/questions/14819574/preserve-normal-word-wrapping-inside-absolutely-positioned-container — Paulie_D, Apr 24 '16 at 19:05

Width of element not increasing to max-width

0 Answers0