Tooltips (1)

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Tooltips (1)

Beitrag von Admin » Do 21. Aug 2014, 16:30

Wer kennt sie nicht die allgegenwärtigen Tooltips.
Bild
Der Einsatz der Tooltips ist eigentlich unbegrenzt. Einige Möglichkeiten will ich in diesem und den folgenden Teilen aufzeigen.

Im ersten Teil (und folgenden) geht es darum, den Besucher deiner HP auf die ergänzenden Infos aufmerksam zu machen. Dies kann von ganz dezent bis zum absoluten Aufmacher geschehen. Hier ein Beispiel, welches du nachher nachbauen kannst.
Vorschau

Zuerst noch ein paar theoretische Grundlagen.
Zur Darstellung von Tooltips werden abbr- bzw. acronym-Tags genutzt. Der acronym-Tag ist eine Teilmenge des abbr-Tags. Die Unterschiede zu definieren bringt sogar „W3C-Götter“ in Schwierigkeiten. Ich halte mich aus dieser Diskussion heraus und verwende den acronym-Tag da dieser (angeblich) von mehr Browser unterstützt wird.
Dazu noch eine Randbemerkung:
Firefox 2 gibt dem Inhalt eines abbr- bzw. acronym-Tags einen eigenen Stil mit einer feinen gepunkteten Linie, so dass Tooltips im Text leicht hervorgehoben werden.

Auf geht’s. Der Nachbau beginnt.
Erstelle im KompoZer die Datei „index.html“ und speichere sie im Ordner deiner Wahl ab.
Füge diesen (unwichtigen) Text ein. „Willkommen im KompoZer-Forum.
Mit KompoZer und CSS eine HP bauen ist einfach! „ . Als Nächstes erstellst du im CSS-Editor ein Element „acronym“ ohne Inhalt und speicherst alles ab. Schließe im KompoZer die Index-Datei. Öffne im Notepad++ die so eben erstellte Datei „index.html“. Der Inhalt sollte so aussehen(nur der Inhalt von body):

Bild
Füge jetzt den Worten „KompoZer-Forum“, „KompoZer“ und „CSS“ den acronym-Tag hinzu.
Dein Quelltext sollte jetzt so aussehen.

Bild
Und so siehts im Browser aus

Noch nicht viel zu sehen ;) , aber weiter geht's.

Jetzt musst du den Text der im Tooltip erscheinen soll eingeben.
Tooltip KompoZer-Forum: title="www.kompozer-web.de
Tooltip KompoZer: title=“Nachfolger von NVU“
Tooltip CSS: title=“Cascade Style Sheet“
Dein Quelltext sollte danach so aussehen.

Bild
Und so siehts im Browser aus

Du bist fast fertig. Nur noch ein bisschen Feinschliff.

Wie du weiter oben gelesen hast setzt der FF unter jeden acronym-Tag eine gepunktete Linie. Der IE aber nicht. Um ein einheitliches Aussehen zu erreichen vergeben wir generell eine Linie. Öffne den CSS-Editor und erweitere den Code für „acronym“ wie folgt.

Code: Alles auswählen

acronym {
border-bottom: 1px dotted black;
}
Wenn du jetzt deine Datei im FF und IE betrachtest haben sie das gleich Aussehen und funktionieren. Nur sieht der Cursor beim überfahren der Worte noch recht mager aus. Erweitere deshalb deinen Code noch einmal.

Code: Alles auswählen

acronym {
border-bottom: 1px dotted black;
cursor: help;
}
Die Eingabe „cursor: help;“ nimmst du in der Karteikarte „Allgemein“ per Hand vor und speicherst ab. Fertig.
Hier noch einmal das Ergebnis

Viel Spaß.
Dieses Tutorial wurde am 13. Jan 2008 von gimp-michel auf KompoZer-Web veröffentlicht.

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast