HTML Popover-Attribut

Popover-Elemente sind ausgeblendet, bis sie über ein aufrufendes Steuerelement (zum Beispiel einem Button) geöffnet werden. Ein popover-Element kann man schließen, indem man außerhalb des Elements klickt oder die Taste: ESC verwendet.

Wird von den Chromium-Browsern unterstützt, jedoch nicht vom Browser: Mozilla Firefox (Version: 123).

Grüße, eine und alle!
    <style>
    button.my-button {
      background-image: linear-gradient(45deg,
          magenta,
          rebeccapurple,
          dodgerblue,
          green);
      border: solid 2px currentColor;
      border-radius: 7px;
      color: #ffd700;
      padding: 10px;
      transition: all 0.3s;
      &:hover {
        color: #FFE770;
        opacity: 0.75;
      }
    }

    div#my-popover {
      background-image: linear-gradient(45deg,
          magenta,
          rebeccapurple,
          dodgerblue,
          green);
      border-radius: 15px;
      box-shadow: 0px 0px 15px 9px rgba(170, 170, 170, 0.9);
      color: #ffd700;
      cursor: default;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: clamp(2rem, 3vw, 4rem);
      opacity: 0.65;
      padding: 65px;
      text-align: center;
      width: 45vw;
    }
    </style>

    <button type="button" popovertarget="my-popover" class="my-button">Öffne Popover</button>

    <div popover id="my-popover">Grüße, eine und alle!</div>

Siehe auch: HTML - Element: <dialog>