HTML Tooltip

Ich bräuchte bitte dringend einen HTML Tooltip von euch sonst stehe ich echt im Wald und sehe den vor lauter Bäumen nicht mehr. Meine Güte ich hätte nie gedacht dass das so schwierig ist aber da lese ich nur lauter Fachbegriffe und damit kenne ich mich nunmal nicht aus.

Also wo kann ich die HTML Tooltips finden, kennt ihr da ein paar gute Seiten auf denen das auch so erklärt wird dass man es verstehen kann? Denn das ist für mich auch wichtig, ich hoffe ihr kennt euch da aus.

Da ich nicht weiß, ob du Erfahrung mit anderen Programmiersprachen hast, würde ich sagen , dass du genug Zeit einplanen solltest, nichts ist wirklich schwierig zu erlernen, vorausgesetzt, dass man bereit ist , z.B. täglich 45 Minuten konzentriert zu arbeiten und zu lernen, denn Bücher und Online-Anleitungen findest du im WWW massig. Deshalb denke ich, dass es halt nicht so "schnell" geht.

Ich schicke dir mal eben eine Seite per PN mit der du vielleicht etwas anfangen kannst, da sie gut aufgebaut ist. Nimm dir Zeit und lies alles durch.

Ich empfehle dir den Tooltip über das Attribut "alt". Der wird soweit ich weiß von den meisten, wenn nicht sogar von allen Browser erkannt und angezeigt. Damit kannst du z.B. einen Text anzeigen lassen, wenn ein Bild nicht angezeigt werden kann. Ansonsten empfehle ich dir Google für spezifische Tooltips, da es von JavaScript bis CSS sehr viele Möglichkeiten gibt, einen Tooltip zu erstellen.

In der Praxis würde die Version mit "alt" bei einem Bild z.B. wie folgt aussehen:
<img scr="http://www.meinedomain.de/bild.jpg" alt="Hier sollte das Bild der Domain meinedomain.de/bild.jpg eigentlich erscheinen.">

Für die von Big-D genannte Funktion wäre das Attribut "alt" genau der falsche Weg, auch wenn es eine Pflichtangabe ist (es kann jedoch auch leer notiert werden, also alt="" ). Das Attribut wird benutzt, um einen Alternativtext für Bilder festzulegen. Kann also ein Bild, aus welchen Gründen auch immer, nicht angezeigt werden, wird der Alternativtext angezeigt.

Zwar wird der Alternativtext von einigen Browsern angezeigt, wenn man mit der Maus über das Bild fährt, aber HTML-Komform ist das nicht. Der Firefox macht es richtig und zeigt den Alternativtext nicht an, wenn das Bild geladen werden konnte.

Soll beim Überfahren eines Bildes ein Text angezeigt werden, ist hier das Attribut "title" zu verwenden. Also z. B.: title="Text zum Bild"

In der Praxis sieht das dann so aus:

<img src="bild.jpg" title="Text zum Bild" alt="Alternativtext zum Bild">

Da es ja einige Browser falsch machen und auch den Alternativtext anzeigen, obwohl man vielleicht überhaupt keinen Text anzeigen lassen möchte, kann man das umgehen, indem man "title" leer notiert. "title" wird nämlich immer vor "alt" angezeigt. Also:

<img src="bild.jpg" title="" alt="Alternativtext zum Bild">

Es gibt unzählige Möglichkeiten: von HTML über CSS bis letztlich zu Javascript.

Die einfachste Möglichkeit bietet HTML selbst: mit dem Attribut "title" kannst du einen nativen Tooltip erzeugen, also einen, der so aussieht, wie es der Anwender von seinem Betriebssystem gewohnt ist. Um das Anzeigen kümmert sich dann der Browser.

Eine weitere, sehr viel schönere Möglichkeit bietet CSS. Dazu musst du ersteinmal den Tooltip in das HTML-Dokument bringen und Bild und Tooltip zusammenfassen. Dies geht mit divs am einfachsten. Weil du später das div auch nocht mit CSS ansprechen willst, musst du eine Klasse für Tooltips vergeben, die natürlich passenderweise "tooltip" genannt werden kann - nichtsdestotrotz sind andere Bezeichnungen auch möglich. Um den Tooltip-Text einzuklammern benutzt du am besten den span-Tag. In HTML:

Code: Alles auswählen

<div class="tooltip">
    <img src="bild.jpg" />
    <span>Dies ist ein Tooltip.</span>
</div>

Jetzt muss natürlich mit CSS noch dafür gesorgt werden, dass der Tooltip nur beim drüberscrollen angezeigt wird. Dazu schaltest du ihn standardmäßig aus - per "visibility: hidden" - und wieder an, wenn über das Element gehovert wird. Außerdem bietet sich hier absolute Positionierung an, da dadurch der Tooltip aus dem Flow gehoben wird. Damit der Tooltip an der richtigen Stelle sitzt benötigt sein Elternelement relative Positionierung. Konkret sähe das in CSS so aus:

Code: Alles auswählen

div.tooltip {
    position: relative;
}

div.tooltip > span {
    visibility: hidden;
    position: absolute;
}

div.tooltip:hover > span {
    visibility: visible;
}

Der große Vorteil an der Sache: du kannst den Tooltip nach Lust und Laune ausgestalten und sogar Bilder und Links in den Tooltip einfügen, wenn es dir gefällt. Nachteile: der Tooltip bleibt da, wo er ist, und bewegt sich nicht mit der Maus mit - potenzielles Einsatzgebiet für Javascript!