CSS Positioned Absolute Element, automatic width outside of parent’s bounds?

Not setting both left and right on .tooltip, and setting white-space: nowrap should do it:

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
  width: auto;
  padding: 5px 10px;
  white-space: nowrap;
}

Working example.

You’d need to use this solution to center an absolute element. It does require an additional element, though. Demo