<main>
  <span class="anchor">Hover for a surprise</span>
  <span class="tooltip">Surprise! I'm a tooltip</span>

  <form>
    <label for="hover">Show tooltip</label>
    <input type="checkbox" id="hover" name="hover" />
  </form>
</main>

.anchor {
    anchor-name: --tooltip;
  }

  .tooltip {
    position: fixed;
    position-anchor: --tooltip;
	  inset-area: top left;
    
    position-try-options:
    inset-area(top), inset-area(top right);
 
    display: none;
}


.anchor:hover + .tooltip{
  display: block;
}



/* Aesthetic changes */

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

html {
  font-family: Helvetica, sans-serif;
}

body {
  width: 250vw;
  overflow-y: hidden;
  
  background-color: #cdb4db;  
}

main {
  display: grid;
  place-items:center;
  
  height: 100vh;
  width: 100vw;
  

  font-weight: 600;

}

.anchor {
  border-bottom: 2px dashed #000;
}

.tooltip {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #2b2d42;
  color: #fff;
  text-align: center;
}

form{
  position: fixed;
  top: 0px;
  left: 0px;
  
  display: flex;
  align-items: center;
  gap: 10px;
  
  padding: 30px;
  
  input{
    height: 1.2rem;
    width: 1.2rem;
  }
}

const hoverCheckBox = document.querySelector("#hover");
const tooltip = document.querySelector(".tooltip");

hoverCheckBox.addEventListener("change", () => {
        if (hoverCheckBox.checked) {
            tooltip.style.display = "block";
        } else {
            tooltip.style.display = "";
        }
});