<!-- Connect button to tooltip -->
<button popovertarget="tooltip" id="button">点击显示提示框</button>

<!-- Anchor tooltip to button -->
<div anchor="button" id="tooltip" popover>Don’t eat yellow snow</div>

#tooltip {
  
  /* Define anchor */
  anchor-name: --tooltip;

  /* Necessary reset */
  margin: 0;

  /* Center vertically */
  align-self: anchor-center;

  /* Pin to right side + 15 */
  left: calc(anchor(right) + 15px);

  &::after {
  
    /* Create caret */
    content: "";
    width: 5px;
    height: 10px;
    corner-shape: scoop;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;

    /* Anchor to tooltip */
    position-anchor: --tooltip;
    
    /* Center vertically */
    align-self: anchor-center;
    
    /* Pin to left side */
    right: anchor(left);
    
    /* Popovers have this already (required otherwise) */
    position: fixed;
    
  }
}

/* Ignore */

button {
  border: none;
  cursor: pointer;
  color: white;
  font: 900 1rem system-ui;
  background: hsl(270 100% 50%);
  height: 3rem;
  padding: 1.5rem;
  display: inline-flex;
  align-items: center;
  border-radius: 0.9rem;
}

#tooltip {
  border: none;
  color: white;
  font: 400 0.75rem system-ui;
  background: red;
  padding: 0.5rem;
  border-radius: 0.5rem;

  &::after {
    background: inherit;
  }
}