Mal sehen, ob das, so etwas, passen könnte:
<div> <!-- ein div, damit es ein Element wird -->
<button type=button popovertarget=KnowMe>
<p>If you don’t know …</p>
<div id=KnowMe popover>
… the solution, every riddle might be a mysterium …
</div>
</button>
</div>
Fehlt noch die Steuerung:
button[popovertarget] {
position: relative; /* nötig? */
&:hover {
& > div[popover] {
display: block;
}
}
}
[popover] {
position: absolute; /* nötig? */
/* „Eine Portion Skeuomorphie bitte!“ */
&::backdrop {
backdrop-filter: blur(2em);
}
}
Hab’ das „mal eben“ aus meiner kleinen Baustelle herauskopiert und denke (hoffe), nichts übersehen zu haben. Hier funktioniert das in Safari und Firefox. — Wenn es so nicht klappt, kann nur irgend eine Kleinigkeit fehlen.
Und: „/* nötig */“? Bin mir da nicht im Klaren: diese Popovers geben sich ja recht eigenständig. Man versuche z. B. mal, ihr Ein- und Ausblend-Verhalten zu manipulieren. Aber: es gibt ja auch noch andere Dinge. Sprich: hier brauche ich die Dinger.
Skeuomorphie? Es gab da mal eine Ecke, in der das Tugen war. Heute gibt es da auch nur konturlose Kacheln und man weiß oft nicht, was man da gerade machen könnte, machen soll … oder besser bleiben lassen sollte. — Will man da endlich mal Redmond kopieren. Incl. dem Scheitern? Oder soll das abschreckend wirken, vielleicht auf Leute mit „ich brauche eine Klickstrecken-Landkarte“ Bedürfnissen?