Button als Icon mit Tooltip

[Gunnar Bittersmann]

@@hmm

ich bau mal wieder an einer Webseite und möchte jetzt Html Inputfelder vom Typ "Button"

Für Buttons gibt es das button-Element. Dieses solltest du nehmen, nicht <input type="button">

als Icon darstellen

Im button-Element kannst du Markup unterbringen, auch ein img-Element. Alternativtext nicht vergessen!

und mit einem Tooltip ausrüsten.

Dafür gibt es das title-Attribut. Bedenke, dass nur ein Teil der Nutzer sowas wie eine Maus hat und in den Genuss des Tooltips kommen kann.

<button id="v1" title="Auf nach San Escobar!">
	<img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Flag_of_San_Escobar.svg" alt="San Escobar" width="42"/>
</button>

Hinweise:

• Icons sollten üblicherweise als Vektorgrafiken (SVG) vorliegen, nicht als Rastergrafiken (PNG, GIF, schon gar nicht JPEG)
• Die Breite hab ich da mal mit reingesetzt; die sollte aber besser im Stylesheet angegeben werden.

Die Html Button bau ich mit JS.

??

Im Internet werden Divs definiert

Button dürfen keine div-Elemente sein. Solche wären nicht für alle Nutzer bedienbar.

LLAP 🖖