Share
Tooltips sind relativ einfach zu implementieren, indem Sie einfach HTML-Code hinzufügen und CSS verwenden. Wenn Sie jedoch noch nie von HTML5-Datenattributen gehört haben, sollten Sie diesen alternativen (und viel saubereren) Ansatz prüfen.
Wenn Sie die Admin Bar-Serie verfolgt haben, sollte dieser Screencast die Dinge gut abschließen. Wenn du nicht haben mache mit, mach dir keine Sorgen; Dieser Screencast zeigt Ihnen etwas, das Sie in allen möglichen Situationen einsetzen können. Wir werden uns ein paar Optionen ansehen, um unsere Tooltipps zum Laufen zu bringen.
Wenn Sie aus irgendeinem verrückten Grund lieber nicht zuschauen möchten, wie ich Dinge zeige, finden Sie unten ein paar Schnipsel zum Mitnehmen und Spielen. Hinweis: Dies sind vereinfachte Beispiele. Möglicherweise möchten Sie Browser-Präfixe und zusätzliche Formatierungen hinzufügen.
Im ersten Beispiel werden zusätzliche Markierungen in Form von a verwendet in unserem Anker Es funktioniert einwandfrei, ermöglicht es uns, unserem Tooltip einen dekorativen "Punkt" hinzuzufügen, und ist derzeit die sicherere Option in Bezug auf die Browserkompatibilität.
HTML:
Accentsconagua
Das ist die Verbindungdas ist der tipp! CSS:
a.tooltip span font-size: 10px; Position: absolut; z-Index: 999; Leerraum: Nowrap; unten: 9999px; links: 50%; Hintergrund: # 000; Farbe: # e0e0e0; Polsterung: 0px 7px; Zeilenhöhe: 24px; Höhe: 24px; Deckkraft: 0; Übergang: Deckkraft 0.4s Nachlassen; a.tooltip span :: before content: ""; Bildschirmsperre; Rahmen links: 6px fest # 000000; Bordüre: 6px durchsichtig transparent; Position: absolut; oben: -6px; links: 0px; a.tooltip: hover span Deckkraft: 1; unten: -35px;
Hier ist das Beispiel, das unser Markup bereinigt, verwendet HTML5 Datenattribut um den Wert unseres Tooltips und des CSS zu erhalten ::Vor Pseudoelement zur Anzeige. Viel ordentlicher.
HTML:
Das ist die Verbindung
CSS:
a.tooltip :: before content: attr (Datentipp); Schriftgröße: 10px; Position: absolut; z-Index: 999; Leerraum: Nowrap; unten: 9999px; links: 50%; Hintergrund: # 000; Farbe: # e0e0e0; Polsterung: 0px 7px; Zeilenhöhe: 24px; Höhe: 24px; Deckkraft: 0; Übergang: Deckkraft 0.4s Nachlassen; a.tooltip: hover :: before Deckkraft: 1; unten: -35px;
