<div class="anchor">⚓︎</div>

<div class="tooltip">
  <p>This is a tooltip.</p>
</div>
.anchor {
  width: fit-content;
  anchor-name: --myAnchor;
}

.tooltip {
  position-anchor: --myAnchor;
  position: fixed;
  left: anchor(right);
  top: anchor(bottom);
  margin-left: 1rem;
  padding: 0.5rem;
  border: 1px solid black;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.