position: relative but siblings thinking the element doesn't exist

Question

I'm creating a tooltip. My problem is that when the tooltip appears, the siblings move, unlike position: absolute. I can't use an absolute position because that positions the tooltip relative to the browser window, and not it's original position.

HTML

<p class="tooltip-anchor">Hover me</p>
<span class="tooltip">Hello!</span>

CSS

.tooltip-anchor:hover + .tooltip {
    display: inline-block;
}

.tooltip {
    display: none;
    position: relative;
    color: #fff;
    background: #333;
    padding: 0.25em;
}

I made a demo on Code Pen.

Answer 1

Whit some modes to your code you can obtaine what do you want. If you insert your span into the p tag you can set a position:absolute to the span (and position relative to it's container) and then modify it's position as you want.

Position absolute: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

body {
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
}

.tooltip-anchor {
  position: relative;
  display: inline-block;
}


/* modified */

.tooltip-anchor:hover .tooltip {
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 20px;
  /* modified */
  left: -40px;
  /* modify for center */
  color: #fff;
  background: #333;
  padding: 0.25em;
  min-width: 150px;
  text-align: center;
}

<p style="font-size: 17px;">A simple tooltip. CSS is wonderful, may I say.</p>

<p class="tooltip-anchor">Hover me <span class="tooltip">Hello!</span></p>

<p>Hello</p>