How I Stopped My Tooltip From Floating Away When Its Content Changed

Tooltips look simple until they decide to become emotionally complicated 😀.

I was working on a tooltip with a fixed width but dynamic content. Sometimes it had one short line. Sometimes it had multiple lines, depending on the message coming from the system.

My requirement was simple: the tooltip should always appear above the element being hovered, with its bottom edge attached to the top of that element.

But my initial approach was not great.

.tooltip {
  position: absolute;
  top: 0;
  width: 250px;
}

With top: 0, the tooltip’s top position stayed fixed. As the content increased, the tooltip height increased downward—which meant it could overlap the hovered element or cover nearby UI.

I tried using negative margins to push it upward. It worked… until the content changed. Then the tooltip would either sit too high, too low, or look like it had lost its connection with the element it belonged to.

Basically, I was trying to manually calculate something CSS already knows: the tooltip’s own height.

The proper solution was to anchor the tooltip from the bottom instead.

.tooltip-wrapper {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 250px;
}

Now bottom: 100% means:

“Place the bottom of this tooltip exactly at the top of its parent.”

So whether the tooltip has one line or ten lines, it naturally grows upward while staying attached to the hover element. No fixed height. No negative margin calculations. No tooltip drama.

If I wanted a small gap between the tooltip and the hovered element, I could simply do this:

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 250px;
}

The key learning for me was that top and bottom do not just control position—they also decide which side stays anchored when content size changes.

For dynamic tooltips, dropdowns, error messages, and popovers, anchoring from the correct side saves a lot of unnecessary CSS tricks.