<div class="tooltip tooltip-1">I'm an anchored tooltip.</div>

<div class="tooltip tooltip-2">Me too!</div>

<p>I'm a random element <em>between</em> the element and the tooltips just to show how arbitrary the DOM can be.</p>

<div class="el">Just Some Element</div>

.el {
  anchor-name: --my-anchor;
  
  background: orange;
  color: white;
  padding: 3rem;
}

.tooltip {
  background: red;
  color: white;
  padding: 1rem;
  position: absolute;
  
}

.tooltip-1 {
  bottom: anchor(--my-anchor top);
  left: anchor(--my-anchor center);
  translate: -50% -10px;
  &::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: 100%;
    left: 50%;
    position: absolute;
  }
}

.tooltip-2 {
  top: anchor(--my-anchor center);
  left: anchor(--my-anchor right);
  translate: 0 -50%;
}

.anchor {
  background: var(--blue-4);
  text-align: center;
  font-weight: bold;
  border-radius: var(--radius-2);
  padding: var(--size-2);
}


* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 2rem; 
}

html {
  font-family: system-ui, sans-serif;
}