Popover statt per Klick per Mouseover öffnen?
bearbeitet von
@@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 ins 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, hier etwas zu antworten, was @Rolf B nicht schon sagte. 🤨)
Event delegation:
{:@en}
```js
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
```js
popoverControlButton.popoverTargetElement.showPopover();
```
aufzurufen. [MDN: [popoverTargetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/popoverTargetElement), [showPopover](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover)]
Und mit [optional chaining operator](https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Optional_Chaining_Operator){:@en} hast du das als Einzeiler:
```js
document.documentElement.addEventListener('mouseover', event => {
event.target.closest('button[popovertarget]')?.popoverTargetElement?.showPopover();
});
```
☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/MWxpYOK?editors=0010)
Kwakoni Yiquan
{:@art-x-kwejian}
--
*Ad astra per aspera*{:@la}