<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>

<select>
  <option value=center>Position anchor</option>
  <option value=center>Center</option>
  <option value=north>North</option>
  <option value=north-east>North East</option>
  <option value=east>East</option>
  <option value=south-east>South East</option>
  <option value=south>South</option>
  <option value=south-west>South West</option>
  <option value=west>West</option>
  <option value=north-west>North West</option>
</select>

@import "https://unpkg.com/open-props/open-props.min.css";
@import "https://unpkg.com/open-props/normalize.min.css";

* {
  box-sizing: border-box;
}

body {
  font-family: "Google Sans", sans-serif;
  display: grid;
  min-height: 100vh;
  background: var(--surface-2);
  color: var(--text-1);
  overflow: hidden;
}

select {
  position: fixed;
  z-index: 2;
  bottom: 1rem;
  right: 1rem;
  padding: 1rem;
}

body:has([value=center]:checked) {
  place-items: center;
}
body:has([value=north]:checked) {
  align-content: start;
  justify-content: center;
}
body:has([value=north-east]:checked) {
  align-content: start;
  justify-content: end;
}
body:has([value=east]:checked) {
  align-content: center;
  justify-content: end;
}
body:has([value=south-east]:checked) {
  align-content: end;
  justify-content: end;
}
body:has([value=south]:checked) {
  align-content: end;
  justify-content: center;
}
body:has([value=south-west]:checked) {
  align-content: end;
  justify-content: start;
}
body:has([value=west]:checked) {
  align-content: center;
  justify-content: start;
}
body:has([value=north-west]:checked) {
  align-content: start;
  justify-content: start;
}

.tooltip {
  position: absolute;
  box-shadow: var(--shadow-4);
  padding: var(--size-4);
  white-space: nowrap;
  border-radius: var(--radius-2);
  font-weight: var(--font-weight-6);
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
}

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

import {computePosition, flip, offset, autoUpdate} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1/+esm';

const anchor = document.querySelector('.anchor')
const tooltip = document.querySelector('.tooltip')

const updatePosition = () => {  
  computePosition(anchor, tooltip, {
    placement: 'top',
    middleware: [ offset(10), flip() ],
  })
    .then(({ x, y }) => {
    Object.assign(tooltip.style, {
      left: `${x}px`,
      top: `${y}px`,
    })
  })
}

const clean = autoUpdate(anchor, tooltip, updatePosition)

document.querySelector('select').addEventListener('change', updatePosition)