HTML Info-Icon mit Popover innerhalb Button - möglich?

[Dsimon24]

Moin zusammen,

ich habe auf einer Website einen Button mit folgendem Code erstellt:

<button type="button" 
        onclick="location.href='https://www.xyz.de/index.php?xyz=1'"
        class="btn" style="text-transform:unset !important; ">
    Hier klicken
</button>

Jetzt möchte ich möglichst innerhalb des Buttons neben dem Text 'hier klicken' ein Info-Icon
einbinden, bei dessen Popover eine Info-Meldung erscheint. Ist das grundsätzlich in dieser
Form möglich? Wie kann ich das am besten realisieren?

VG, David

 

[RalphS]

1. Finger weg von !important. Widerspricht allen Regeln von CSS. Näheres bei Interesse via Tante Gockel.

2. Das geht indirekt, indem Du eine DOM-Struktur bastelst. Mit INPUT oder BUTTON selber geht das nicht, Du kannst aber - andeutungsweise -- auf sowas wie

<div class="button" id="mybuttonid" style="display:none;">
<span class="label">Was auf dem Button steht< /span>
<span class="icon">path/to/icon.png</span>
<span class="desc">Beschreibungstext</span>
</div>

ausweichen.
Dann in CSS mit #mybuttonid>.label zB aufs Label zugreifen und entsprechend das DIV wie gewünscht als Schaltfläche anzeigen lassen (non interaktiv) und in JS über DOM auf die per mybuttoniddentifizierte Struktur zugreifen und click- sowie mouseover/mouseleave Events abfangen und verarbeiten.

Das Ganze als Funktion mit der div id als Parameter sowie einem Callback als Argument und schon funktioniert das für alle entsprechend angelegten Buttons.

-- Natürlich kannst Du auch einfach ein leeres DIV-Tag mit ID im HTML-Code anlegen und dann die Buttondefinitionen in irgendeiner Library haben, zB als JSON-Datendatei mit der o.g. Definition halt in JSON Syntax. Ist für die Handhabe sicherlich einfacher.