Gunnar Bittersmann: Popover statt per Klick per Mouseover öffnen?

Beitrag lesen

@@MudGuard

ich nutze auf einer "nur für mich" Seite (also muß nix Barrierefreies sein, Maus ist vorhanden)

Das Gute an HTML-Standards ist, dass man, wenn man sie einhält, Barrierefreies gleich frei Haus geliefert bekommt (sofern die bei Nutzern eingesetzte Technik die neuen HTML-Features schon unterstützt).

Ich hätte gerne (zusätzlich?), daß sich das Popover nicht erst bei Klick auf den Button öffnet, sondern bereits, wenn die Maus über dem Button schwebt. […] Gibt's da evtl. ein Attribut a la popoveractivation="hover" oder so?

Nichts dergleichen gefunden. Ich kann mir auch kaum vorstellen, dass irgendwas in den HTML-Standard aufgenommen wird, dass Buttons eine Aktion auslösen lässt, ohne dass sie geclickt werden.

Ist das mit kleinem Aufwand möglich?

Ja, mit etwas JavaScript.

Kiloweise Javascript würde ich eher ungern einbauen.

Ist auch nicht nötig; eine Prise genügt. (Es ist kaum möglich, in diesem Forum irgendetwas zu antworten, was @Rolf B nicht schon sagte. 🤨)

Event delegation:

document.documentElement.addEventListener('mouseover', event => {
  const popoverControlButton = event.target.closest('button[popovertarget]');
  if (popoverControlButton) {
    // todo
  }
]);

was du dann bei todo tun musst, ist einfach nur

    popoverControlButton.popoverTargetElement.showPopover();

aufzurufen. [MDN: popoverTargetElement, showPopover]

Und mit optional chaining operator hast du das als Einzeiler:

document.documentElement.addEventListener('mouseover', event => {
  event.target.closest('button[popovertarget]')?.popoverTargetElement?.showPopover();
});

Beispiel

Kwakoni Yiquan

--
Ad astra per aspera