<div class="container">

  <a id="my-anchor" class="anchor">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>information-circle</title><g fill="none"><path d="M11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-9-3.75h.008v.008H12V8.25z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
    <span>This is some important notice in your application.</span>
  </a>
  <div class="tooltip">
    <h3>Tooltip</h3>
    <p>Tooltip content</p>
  </div>
</div>

/* As of June 2023 this requires Chrome Canary with Experimental features enabled */

body {
  font-family: sans-serif;
  padding: 1rem;
}

.container {
  margin: 4rem auto;
  max-width: 600px;
}

.anchor {
  anchor-name: --tooltip;
  color: #444;
  font-weight: 500;
  padding: .5rem 1rem;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.anchor svg {
  stroke: currentcolor;
  color: #444;
  width: 24px;
  height: 24px;
  position: relative;
  top: 6px;
}

.anchor:hover ~ .tooltip {
  opacity: 1;
  visibility: visible;
  transition: ease-in .2s all;
}

.tooltip {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  anchor-default: --tooltip;

  /* Align the tooltip’s bottom to the top of the anchor,
     but automatically swap if this overflows the window
     to the tooltip’s top aligns to the anchor’s bottom
     instead. */
  bottom: anchor(auto);
  
  
  width: 400px;

  background: rgba(0, 0, 0, .01);
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #333;
  transition: ease-in .2s all;
}

.tooltip h3 {
  margin: 0;
}