Tooltips (2)

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

Tooltips (2)

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

Es gibt viele verschiedene Möglichkeiten einen Tooltip zu positionieren. In diesem Tut möchte ich kurz die relative Positionierung vorstellen.
Die absolute Positionierung folgt in „Tooltips (III)“.

Relativ bedeutet in diesem Fall, dass die Anzeigeposition abhängig von der Position des Textes ist. Der Tooltip erscheint unterhalb des Wortes (Textes). Er „wandert“ praktisch mit.

In diesem Tut sind die Tooltips alle relativ ausgerichtet und unterscheiden sich nur in den verschiedenen Gestaltungsmöglichkeiten. Die Beispiele können und sollen nach eigenen Bedürfnissen angepasst werden, z.B. den Rahmen oder die Hintergrundfarbe ändern. Mit ein wenig Probieren erhältst du die tollsten Effekte!

Hier die Beispiele zum Testen.

Kommen wir zum Beispiel1:
Erstelle eine neue Datei. Schreibe dort z.B.:
Beispiele zum Testen:
Das Erste: Beispiel mit Standard-Tooltip Dies ist ein Beispiel mit einem nichts sagenden Text der künstlich in die Länge gezogen wurde...........


Nun wollen wir den Wortlaut „ Beispiel mit Standard-Tooltip“ mit einem Tooltip hinterlegen.
Dazu markiere den Wortlaut sowie den folgenden Tooltip und erstelle einen Link (wie im Bild zu sehen ).
Bild Ups. Ein wenig abgeschnitten ;) :lol:

Jetzt mache den Tooltip wie folgt „unsichtbar“.
Speichere deine Datei und öffne sie anschließend mit Notepad++. Dort änderst du den Quelltext:

Vorher:
<a href="#nogo">Beispiel mit Standard-Tooltip Dies ist ein Beispiel mit einem nichts sagenden Text der künstlich in die Länge gezogen wurde...........</a>

Nachher:
<a href="#nogo">Beispiel mit Standard-Tooltip<span>Dies ist ein Beispiel mit einem nichts sagenden Text der künstlich in die Länge gezogen wurde...........</span></a>

Abspeichern und Notepad beenden.
Die Vorschau sollte jetzt so aussehen.
Jaja der Tooltip ist immer noch zu sehen. Jetzt geht es weiter mit dem CSS-Editor.
Als erstes erstelle eine Regel für den Link:

Code: Alles auswählen

a.tip_anzeigen {
  position: relative;
  text-decoration: none;
  font-style: italic;
  color: #0000ff;
}
Teile dem Link (<a>) die Klasse „tip_anzeigen“ zu.

Und die nächste für :hover

Code: Alles auswählen

a.tip_anzeigen:hover {
  background-color: transparent;
  color: #0000ff;
}
Und nun die Regel zum „unsichtbar machen“

Code: Alles auswählen

a.tip_anzeigen span {
  display: none;
  text-decoration: none;
}
Zum Schluß noch die Regel zum wieder sichtbar machen und zur Platzierung. Diese Regel lädt förmlich zum Experimentieren/Probieren ein.

Code: Alles auswählen

a.tip_anzeigen:hover span {
  border: 1px solid #000000;
  background-color: #ffffcc;
  display: block;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 100;
  color: #000000;
  font-family: Verdana,sans-serif;
  font-size: 12px;
  text-align: left;
  width: 200px;
}
Hier das Zwischenergebnis.
Wie du sicherlich bemerkt hast wird durch die Begrenzung der Breite (width: 200px ) der lange Tooltip zu einer vernünftigen Anzeige formatiert.

Beispiel2 ist ähnlich aufgebaut ist aber mit Zeilenumbrüchen (zur Demo) versehen.
Der Text:
Das Zweite: Beispiel mit Zeilenumbruch Dieser Text dient als Beispiel

für einen

Zeilenumbruch


Gebe diesen Text auch so wie oben dargestellt ein. Markiere, erstelle einen Link und formatiere ihn wie oben beschrieben. Fertig.
Zu sehen hier.

Beispiel3 ist ebenfalls so ähnlich aufgebaut wie Beispiel1.
Der Text:
Das Dritte: Beispiel mit eingefärbtem Header Beispiel 3
Mit einen farbigen Header sieht es gleich noch mal so schön aus

Gebe diesen Text auch so wie oben dargestellt ein. Markiere, erstelle einen Link und formatiere ihn wie oben beschrieben. Speichere deine Datei ab und öffne sie mit Notepad++. Ändere deine Quelltext so ab:

Vorher:
<span>Beispiel 3<br>

Nachher:
<span><b>Beispiel 3</b><br>

Nun erstelle die Regel zur Formatierung des Headers. Auch diese Regel lädt zum Probieren ein.

Code: Alles auswählen

a.tip_anzeigen span b {
  border-style: none none solid;
  border-color: black;
  border-width: 0px 0px 1px;
  margin: 0 0 -10pt;
  padding: 0;
  display: block;
  font-size: 16px;
  background-color: #cccccc;
  color: red;
  text-align: center;
}
Siehe das Ergebnis in horizontaler Anordnung.

Viel Spaß beim Nachbau und beim Experimentieren.
Dieses Tutorial wurde am 27. Feb 2008 von gimp-michel auf KompoZer-Web veröffentlicht.

Antworten