CSS Anchor Function Basic

<!DOCTYPE html>
<title>My Example</title>

/* 1. Define the anchor element */
  .my-button {
    anchor-name: --tooltip-anchor;
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

/* 2. Position the tooltip relative to the anchor */
  .my-tooltip {
    position: absolute;
    /* Bind the top of the tooltip to the bottom of the button */
    top: anchor(--tooltip-anchor bottom);
    /* Center the tooltip horizontally relative to the button */
    left: anchor(--tooltip-anchor center);
    
    /* Shift it back by 50% of its own width to perfectly center it */
    translate: -50% 10px;
    
    padding: 10px;
    background-color: #333;
    color: white;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 0.9em;
    white-space: nowrap;
    
    /* Hide by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
  }
  
  /* Show the tooltip on hover or focus */
  .my-button:hover + .my-tooltip,
  .my-button:focus + .my-tooltip {
    opacity: 1;
    visibility: visible;
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.9em;
    color: #d9534f;
    margin-top: 10px;
  }
  
  /* Hide the tooltip completely if anchor positioning isn't supported */
  @supports not (top: anchor(bottom)) {
    .my-tooltip {
      display: none !important;
    }
  }
</style>

<div class="container">
  <button class="my-button">Hover / Focus Me</button>
  <div class="my-tooltip">I am anchored to the button!</div>
</div>

<div class="warning-msg">
  <em>Note: If you do not see a dark tooltip below the button when hovering, your browser does not currently support the CSS Anchor Positioning API.</em>
</div>