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

I believe the best solution for this issue is not setting left, right or white-space: nowrap but we have a new value for width property max-content... so just add the width: max-content;(this one works with max-width as well)

demo: http://jsfiddle.net/qLgw8bxu/

support: https://caniuse.com/#search=max-content

.tooltip {
 background-color: blue;
 position: absolute;
 text-align: center;
 padding: 5px 10px;

 width: max-content;
}

If .parent can be made inline, you could make .tooltip render as a table and it will autosize to fit its contents, but unlike with the use of white-space:nowrap, it would also support a max-width.

.parent {
  display: inline;
  position: relative;
}

.tooltip {
  position: absolute;
  display: table;
  top: 0;
  left: 0;
  text-align: center;
  padding: 5px 10px;
  max-width: 200px;
}