Absolutely positioned min-width/max-width

Absolutely positioned elements will grow to fit the size of their content, but not grow larger than the width of the parent element unless an explicit width is set. In the case of a bubble popup, this means the text will wrap at the width of the "?" or whatever text triggers the popup. max-width will not allow the absolutely positioned element to grow larger than the width of the tooltip trigger, and setting min-width or width will make the element too wide (the bubble will not "shrink" to fit shorter tooltip text). A second absolutely positioned element is used to overcome this limitation, and acts as a new "max-width" for the text.

by thirdender

HTML

<div class="tooltip">
  <div class="trigger">
    ?
  </div>
  <div class="bubbleConstraint">
    <div class="bubble">
      The bubble shrinks!
    </div>
  </div>
</div>

<div class="tooltip">
  <div class="trigger">
    ?
  </div>
  <div class="bubbleConstraint">
    <div class="bubble">
      And grows! And still wraps appropriately!
    </div>
  </div>
</div>

SCSS

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  align-items: center;
  justify-content: space-around;
  font-family: sans-serif;
}

.tooltip {
  position: relative;
  .trigger {
    display: inline-block;
    background: #e4e4e4;
    color: #333;
    font-weight: bold;
    width: 1.8em;
    height: 1.8em;
    text-align: center;
    line-height: 1.8em;
    border-radius: 1.8em;
  }
  .bubbleConstraint {
    position: absolute;
    top: 100%;
    display: flex;
    align-items: center;
    width: 200px;
    margin-left: calc(-100px + 0.9em);
    background: rgba(0, 50, 100, 0.1);
  }
  .bubble {
    margin: 0.4em auto;
    background: #e4e4e4;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.4em;
    box-sizing: border-box;
    text-align: center;
  }
}