---
title: "Wes Bos on X: \"CSS Anchors: flip a tooltip to the bottom when ..."
description: "!https://x.com/wesbos/status/1856724739336859713"
date: 2024-11-19
published: true
tags:
  - css
  - dev
  - html
  - thought
  - webdev
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://x.com/wesbos/status/1856724739336859713" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-image">
      <img src="https://pbs.twimg.com/ext_tw_video_thumb/1856724371076763648/pu/img/GATH76Sxy5Nq-CDk.jpg" alt="Wes Bos (@wesbos) on X — CSS Anchors: flip a tooltip to the bottom when it goes offscreen" loading="lazy">
    </div>
    <div class="embed-card-content">
      <div class="embed-card-title">Wes Bos (@wesbos) on X</div>
      <div class="embed-card-description">CSS Anchors: flip a tooltip to the bottom when it goes offscreen</div>
      <div class="embed-card-meta">X (formerly Twitter) &middot; x.com</div>
    </div>
  </a>
</div>


These css anchors are crazy that you can do this with html and not a bunch of js, probably requiring a library or framework.

![](https://x.com/i/status/1856724739336859713)