Absolutely positioned element resize to fix the text

August 18, 2022

I am trying to make a tooltip that shows extra info when the keyword is hovered or selected. The part I am struggling with is getting an absolutely positioned element to reflow the text in a nice manner.

Using white-space: nowrap; works well with small amounts of text but is useless with large amounts of text. The best solution I have come up with is to wrap the tooltip’s container in an extra container that has a width of the max width I wish the tooltip to be. This works great when the keyword is on the left of the screen and the container doesn’t touch the right side of the screen, but when the keyword is close enough to the right side of the screen that the container passes the edge of the screen a horizontal scroll bar appears.

Does anybody have any suggestion on how to get an absolutely positioned element to resize around text so that small amounts of text are contained fully without extra space but still allow large amounts of text to reflow once a certain width is hit?

a.tooltip {
  position: relative;
}

a.tooltip >div {
  position: absolute;
  display: none;
  width: 350px;
}

a.tooltip >div >div {
  display: inline-block;
  border: 1px solid red;
  border-radius: 5px;
  padding 5px;
}

a.tooltip:focus >div,
a.tooltip:hover >div {
  display: inline-block;
}

<div style="display: inline-block; width: 400px;">
<a href="javascript:void(0)" class="tooltip">
  House
  <div>
    <div>
      A self-contained dwelling structurally independent from other dwellings and intended for long-term residential use. To be self-contained the suite of rooms must possess cooking and bathing facilities as building fixtures.
    </div>
   </div>
 </a>
 </div>
 
 <a href="javascript:void(0)" class="tooltip">
  Keyword
  <div>
    <div>
      Not much text
    </div>
   </div>
 </a>

>Solution :

A negative margin-right combined with max-width can do the trick here. You can also keep only one wrapper:

a.tooltip {
  position: relative;
}

a.tooltip >div {
  position: absolute;
  display: none;
  max-width: 350px;
  margin-right: -350px;
  border: 1px solid red;
  border-radius: 5px;
  padding 5px;
}
a.tooltip:focus >div,
a.tooltip:hover >div {
  display: inline-block;
}

<div style="display: inline-block; width: 400px;">
<a href="javascript:void(0)" class="tooltip">
  House
  <div>
      A self-contained dwelling structurally independent from other dwellings and intended for long-term residential use. To be self-contained the suite of rooms must possess cooking and bathing facilities as building fixtures.
    </div>
 </a>
 </div>
 
 <a href="javascript:void(0)" class="tooltip">
  Keyword
  <div>
      Not much text
   </div>
 </a>