In diesem Tutorial erstellen wir mit reinem CSS einen Tooltip, wenn wir mit der Maus über ein Symbol fahren. Das exakt gleiche Prinzip kann auf ein Bild angewendet werden. Gehen Sie zur Demoseite.
Lassen Sie uns eine Liste mit fünf Elementen erstellen. In jedem Element platzieren wir ein i-Tag mit dem gewünschten Symbol, indem wir einfach den Code für ein bestimmtes Symbol von der Font Awesome-Website kopieren.
Unter dem Icon-Tag schreiben wir ein Span-Tag mit dem entsprechenden kurzen Hinweistext.
Danach fügen wir die Style-Datei hinzu – style.css. Ändern Sie die Position der Symbole von vertikal auf horizontal.
Dazu weisen wir dem übergeordneten Container den Wert -flex zu.
Wir färben den Hintergrund unter den Symbolen und die Farbe der Symbole selbst.
Die Symbolgröße wird anhand der Schriftgröße festgelegt.
Das Erscheinungsbild der Symbolreihe ist bereits festgelegt.
Wenn Sie den Mauszeiger über ein Symbol bewegen, ändern sich die Farbe des Symbols und das Aussehen des Cursors.
Wenn Sie mit der Maus über das Symbol fahren, wird ein Text-Tooltip in einem rechteckigen Block angezeigt; im HTML-Markup ist dies der Text im Span-Tag. Platzieren wir Hinweise über den Symbolen.
Stellen wir die Boxgrößen auf die folgenden festen Größen ein.
Richtet den Text vertikal und horizontal in der Mitte aus.
Hintergrundfarbe, Textfarbe und Textgröße.
Runden Sie die Ecken um 4 Pixel ab und sorgen Sie beim Schweben für einen sanften Übergang.
Der Tooltip wird unsichtbar und transparent gemacht.
Um einen kleinen Pfeil unter den Block zu zeichnen, verwenden wir das Pseudoelement ::before, was in der Praxis bedeutet, dass der Pfeil nicht tatsächlich in der HTML-Datei vorhanden ist (leerer Inhalt), sondern nur in der CSS-Datei vorhanden ist. Ein Pfeil, der auf ein Symbol zeigt, ist nichts anderes als eine 10 x 10 Pixel große quadratische Form, die um 45 Grad gedreht und gegen einen Span-Block mit einem negativen Wert gedrückt wird. Dadurch wird das Quadrat in ein Dreieck umgewandelt und liegt auf einer Ebene mit einem niedrigeren Z-Index: -1 als sein übergeordnetes Span-Tag.
Die Bereitstellung zusätzlicher Informationen zu möglicherweise komplexen Elementen der Benutzeroberfläche ist ein sehr wichtiger Teil der Arbeit eines Webdesigners bei der Entwicklung einer benutzerfreundlichen und zugänglichen Website.
Ein häufig verwendeter Mechanismus zum Anzeigen zusätzlicher Informationen über das, was auf der Seite sichtbar ist, sind Tooltips (Designelemente zum Anzeigen von Hinweisen zu bestimmten Elementen auf dem Bildschirm).
Zwar gibt es viele innovative Lösungen, die CSS und JavaScript verwenden (mit oder ohne Verwendung eines JavaScript-Frameworks wie jQuery), aber manchmal ist es nützlich, einen Blick darauf zu werfen, wie neue Technologien altbewährte Techniken auf den Kopf stellen.
Dieses Tutorial zeigt Ihnen, wie Sie mit nur CSS erstaunliche browserübergreifende Tooltips erstellen können.
Überall dort, wo Sie eine Abkürzung oder ein Akronym erklären, die Bedeutung eines Wortes erklären oder zusätzliche Informationen zu etwas bereitstellen müssen, sind Tooltips eine einfache, aber effektive Lösung.
Von dem kleinen gelben Textblock, der über einem Element wie einem Bild erscheint und den Inhalt des Titelattributs (oder des Alt-Attributs, wenn Sie das Pech haben, Internet Explorer zu verwenden) anzeigt, bis hin zu skriptbasierten, ausgefeilten Lösungen mit Tooltips, Tooltips sind ein fantastisches Tool, das in der Design-Community offenbar wenig Popularität genießt.
Während sich schnell entwickelnde Standards mit neuen Techniken immer besser von neuen Browsern unterstützt werden, ermöglicht uns der Aufstieg von CSS auch die Erstellung von Tooltips (die als Ersatz für langweilige Browser-Standardeinstellungen wie die oben genannten dienen) auf einem neuen Niveau Detail und Design.
Wenn Sie bereits jQuery-basierte Lösungen verwendet haben, werden Sie sicherlich feststellen, dass JavaScript viele Dinge tun kann, die CSS nicht kann (z. B. das Verschwinden des Tooltips verzögern). Hervorhebungen und Stilisierungen können jedoch mit CSS durchgeführt werden, was Ihr Design verbessert und andere großartige Designs inspiriert, die über Tooltips hinausgehen.
In diesem Tutorial erstellen wir Tooltips mit reinem CSS.
Das bedeutet, dass sie in Browsern funktionieren, die CSS3 nicht unterstützen (z. B. Internet Explorer 8 und älter) – sie werden dort nicht so gut aussehen wie in neueren Browsern.
Das Aussehen von Effekten wie Farben, Schriftarten, Bildern und Tooltip-Rahmen hängt davon ab, was auf dem Computer des Endbenutzers verwendet wird (Browser, installierte Schriftarten oder Monitorkontrast).
CSS3-Erweiterungen Mit einfachen, aber effektiven Erweiterungen wie den Eigenschaften „border-radius“ und „box-shadow“ können Sie einem einfachen Rechteck mit Sprechblasennachrichten ein neues und hübsches Aussehen verleihen.
Was steckt unter unserer Haube? Beginnen wir mit dem HTML-Code für unser Beispiel.
verschiedene Arten von Tooltips Um Ihnen genügend Anregungen für Ihre eigenen Projekte zu geben, werden wir fünf verschiedene Arten von Tooltips erstellen.
Jeder von ihnen sieht den anderen sehr ähnlich, um die Anzeigeausgabe zu standardisieren. Sie können jedoch später mit ihnen experimentieren, um sie im Detail zu studieren und das Erscheinungsbild zu ändern.
Dieser Mechanismus sollte in allen Browsern funktionieren. Bei Bedarf können Sie ihn jedoch nach Ihren Wünschen ändern.
Grundlegendes Markup Im folgenden Code verwenden wir die generische XHTML 1.0-Vorlage mit einem regulären Element.
Da wir zum Erstellen unserer Elemente CSS verwenden, wird das CSS zu Lernzwecken mithilfe von in das Dokument eingebettet.
Wenn Sie möchten, können Sie auch jQuery- oder JavaScript-Code hinzufügen, um die Effekte und Funktionalität zu verbessern!
HTML-Markup-Tooltips Ein Beispiel für mit CSS erstellte Tooltips! Bewegen Sie die Maus über den Text, um Folgendes zu sehen: klassischer Hinweis, kritische Nachricht 
Kritischer Beitrag Dies ist nur ein Beispiel dafür, wie man Tooltips mit CSS erstellt!, Hilfe 
HilfeDies ist nur ein Beispiel dafür, wie man Tooltips mit CSS erstellt!, Info 
InfoDies ist nur ein Beispiel dafür, wie man Tooltips mit CSS erstellt! und Warnung 
Warnung: Dies ist nur ein Beispiel dafür, wie man Tooltips mit CSS erstellt!
Dies ist nur ein Beispiel dafür, wie man Tooltips mit CSS erstellt!
Der Code verwendet ein Element (nichts Besonderes damit verbunden) und Absätze (
?
Der Grund, warum wir das a-Tag anstelle von abbr, dfn oder span verwenden, ist, dass IE6 den:hover-Pseudoselektor für andere Elemente als a nur unzureichend unterstützt.
Wenn Sie IE6 nicht unterstützen möchten, können Sie ein anderes Tag verwenden.
Jedes span-Element im Beispiel ist auf „class classic“ (für einen regulären Tooltip) oder „custom“ (mit „critical“, „help“, „info“ oder „warnung“ entsprechend dem verwendeten Farbschema) festgelegt.
Diese Verwendung des Stils hat auch einige Vorteile in Form eines em-Elements (das den Titel des Tooltips festlegt) und eines Bildes (das als Symbol im Tooltip verwendet wird; Sie können Ihre eigenen Bilder verwenden).
CSS Wir haben den HTML-Code für die Seite geschrieben und es ist an der Zeit, dass die Tooltips ihre Aufgabe erfüllen.
Der folgende Code, der einem Abschnitt der Seite hinzugefügt wird, stellt jeden Link, der den Tooltip enthält, auf einen netten kleinen Stil mit einer gepunkteten Unterstreichung ein (um ihn von einem normalen Link zu unterscheiden, der eine durchgezogene Unterstreichung hat) und setzt den Cursor mit Fragezeichen (auch zur optischen Unterscheidung).
Außerdem wird die Unterstreichung entfernt und die Farbe festgelegt (damit das Element weniger wie ein normaler Link aussieht).
Der zweite Teil des Codes verbirgt einfach den Tooltip, bis er benötigt wird.
Alles ist sehr einfach!
CSS-Stile für class.tooltip .tooltip ( border-bottom: 1px dotted #000000; Farbe: #000000; Outline: none; Cursor: help; text-decoration: none; position: relative; ) .tooltip span ( margin-left: -999em; Position: absolut; ) Der Inhalt von QuickInfos wird aus der Ansicht entfernt, indem eine negative Eigenschaft „margin-left“ anstelle von „display: none“ oder „sichtbarkeit: versteckt“ verwendet wird, da einige Bildschirmleseprogramme diese Eigenschaften ignorieren.
CSS-Stile für Tooltips Wir werden bald dafür sorgen, dass Tooltips in verschiedenen Browsern gleich funktionieren. Fügen wir nun ein paar Zeilen CSS-Code hinzu.
Durch das Hinzufügen des folgenden Codeabschnitts werden wir Tooltips auf dem Bildschirm anzeigen, obwohl diese banal aussehen und visuell schwer vom Rest des Textes zu trennen sind.
CSS zum Anzeigen von Tooltips.tooltip:hover span (Schriftfamilie: Calibri, Tahoma, Geneva, serifenlos; Position: absolut; links: 1em; oben: 2em; Z-Index: 99; Rand links: 0; Breite: 250px; ) .tooltip:hover img ( border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; ) .tooltip:hover em ( Schriftfamilie: Candara, Tahoma, Geneva, serifenlos ; Schriftgröße: 1,2 em; Schriftstärke: fett; Anzeige: Block; Auffüllung: 0,2 em 0 0,6 em 0; ) .classic ( Auffüllung: 0,8 em 1 em; ) .custom ( Auffüllung: 0,5 em 0,8 em 0,8 em 2 em ; ) * html a:hover ( Hintergrund: transparent; ) Zeile erforderlich * html Sie fragen sich vielleicht, warum die letzte Zeile im obigen Code enthalten ist? Es legt die Transparenz für den Hintergrund des Links fest. Beim Testen von Tooltips habe ich einen seltsamen Effekt im IE6 entdeckt, der nicht entfernt werden konnte, solange der Linkhintergrund vorhanden war!
Der obige Code stellt die Funktionalität von Tooltips sicher. Sie werden auf dem Bildschirm angezeigt, sind aber nur schwer vom allgemeinen Text zu trennen. Es gibt keine Farbschemata, die den Tooltip-Text auf der Seite hervorheben.
Legen Sie das Farbschema für Tooltips/ Der folgende Code legt ein Farbschema für jeden der fünf Tooltip-Stile fest.
Nachdem Sie den Seitencode geändert und im Browser aktualisiert haben, werden Tooltips angezeigt, wenn Sie mit der Maus über den Link fahren, die in allen Browsern fast gleich sind.
CSS-Code für das Farbschema .classic ( Hintergrund: #FFFFAA; Rand: 1 Pixel einfarbig #FFAD33; ) .critical ( Hintergrund: #FFCCAA; Rand: 1 Pixel einfarbig #FF3334; ) .help ( Hintergrund: #9FDAEE; Rand: 1 Pixel einfarbig # 2BB0D7; ) .info ( Hintergrund: #9FDAEE; Rand: 1 Pixel durchgehend #2BB0D7; ) .warning ( Hintergrund: #FFFFAA; Rand: 1 Pixel durchgehend #FFAD33; ) Der CSS-Code ist sehr einfach, aber er verleiht den Tooltips ein tolles Aussehen und erledigt überall seinen Zweck. Das Farbschema kann nach Ihrem Ermessen geändert werden.
Ein paar CSS3-Angriffe für die erweiterte Tooltip-Anzeige Bevor wir dieses Tutorial beenden, fügen wir ein paar Zeilen CSS3-Code hinzu, um unseren Tooltips visuelle Effekte hinzuzufügen. Lassen Sie uns mit der Eigenschaft „border-radius“ abgerundete Ecken festlegen und mit der Eigenschaft „box-shadow“ eine gewisse Dimension hinzufügen.
Da keine dieser Eigenschaften weltweit unterstützt wird, funktionieren sie nur in einigen der neuesten Browserversionen. Aber wo sie funktionieren, sehen die Tooltips elegant und sexy aus!
Fügen wir den folgenden Code zum Bereich „selector.tooltip:hover“ hinzu und aktualisieren Sie die Seite.
Visuelle Effekte für Rahmen, Schatten und Transparenz heben den Tooltip über den Seitentext und machen die Informationen kontrastreich und leicht lesbar.
Möglicherweise stellen Sie fest, dass nicht nur die offiziellen CSS3-Eigenschaften verwendet werden, sondern auch Erweiterungen für Mozilla und WebKit.
Zusätzliche CSS-Eigenschaften für neue Browser border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-Grenzradius: 5px; Box-Shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
Zusammenfassung Dieses Tutorial zeigt, dass die Verbesserung der Benutzeroberfläche keinen großen Aufwand erfordert. Darüber hinaus lohnt es sich, einen Blick auf die Erfahrungen mit der Verwendung von CSS zu werfen, die hilfreich sein können, um eine neue Ebene der Interaktivität für eine Webanwendung festzulegen.
In diesem Artikel möchte ich verschiedene Optionen zum Organisieren einer solchen Funktion in einem beliebigen Layout diskutieren. Ein lebendiges Beispiel einer solchen Umsetzung habe ich übrigens bereits auf meiner Website. Wenn Sie auf dieser Seite nach unten zu den Kommentaren scrollen und mit der Maus über das Datum des Kommentars fahren, wird sofort klar, was genau gesagt wird. Wenn es noch keine Kommentare gibt, können Sie gleichzeitig einen hinterlassen.
Ich sehe zwei Hauptmethoden zum Implementieren eines Tooltips: Dies ist die Hover-Methode, die auch am beliebtesten ist, und die weniger beliebte Methode, wenn Sie auf ein Element klicken. Beginnen wir natürlich mit dem Erscheinen eines Tooltips, wenn Sie mit der Maus über ein Element fahren.
Ich dachte, ich fange in diesem Artikel mit dem primitivsten Punkt an, der Anzeige eines Hinweises mit title , der in keiner Weise formatiert werden kann, aber ich denke, Sie können ihn überspringen, da er bereits klar ist. Wenn Ihnen das oben Gesagte nicht ganz klar ist, denke ich, dass nach dem Studium des Videos alles viel klarer wird.
Eine einfache Möglichkeit mit Design, beim Schweben. Es ist nicht komplizierter als die Methode, die ich verpasst habe. Nur anstelle des Titelattributs werde ich data-title verwenden und CSS-Stile verwenden. Eigentlich gebe ich unten den HTML-Code an:
?
/* Wir verwenden das After-Pseudoelement, um die Leiste selbst zu entwerfen, verstecken es aber gleichzeitig, da es nur beim Hover erscheinen sollte */ .hover:after (content: attr(data-title); display: none ;Position: absolut; unten: 130 %; links: 0px; Hintergrundfarbe: #fff; Farbe: #3aaeda; Polsterung: 5px; Textausrichtung: Mitte; -moz-box-shadow: 0 1px 1px rgba(0, 0,0,.16) ; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font -size: 12px;) / * Fügen Sie eine Eigenschaft hinzu, damit, wenn Sie mit der Maus über ein Element fahren, ein Hinweisfeld angezeigt wird */ .hover:hover:after(display: block;)
An dieser Stelle möchte ich Sie darauf aufmerksam machen, dass es sich lediglich um ein Beispiel für Designeigenschaften handelt. Das Erscheinungsbild der Matrize können Sie selbstverständlich nach Ihren Wünschen gestalten.
Tooltip beim Schweben. Dies ist möglicherweise die beliebteste Methode zur Implementierung dieser Funktion. Zumindest verwende ich das am häufigsten.
? Dies ist ein Design-Tipp
In diesem Beispiel sehe ich auch nichts Besonderes, sondern mehr, aber das Ergebnis wird auch ohne Verwendung des data-title-Attributs besser sein. Der Container dient in diesem Fall als Wrapper für unsere Elemente, die zur Implementierung des Tooltips verwendet werden. Und auch die Matrize selbst wird relativ zum Behälter positioniert.
/* relative Positionierung zum Container festlegen */ .block(position:relative;) /* Entwerfen Sie das standardmäßige ausgeblendete Element */ .hidden (display: none; position: absolute; unten: 130%; links: 0px; Hintergrundfarbe : # fff; Farbe: #3aaeda; Polsterung: 5px; Textausrichtung: Mitte; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); Schriftgröße: 12px;) /* Zusätzliche Dekoration für das versteckte Element (optional) */ .hover + .hidden:before (Inhalt: " "; Position: absolut; oben: 98 %; links: 10 %; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; Breite: 0; Rand: 7px fest transparent; Rand-rechts: 7px fest #fff; Randfarbe: #fff transparent transparent transparent; Z-Index: 2;) /* Zusätzliche Dekoration für das versteckte Element (optional) * / .hover + .hidden :after (Inhalt: " "; Position: absolut; oben: 100 %; links: 10 %; Rand links: -5 Pixel; Rahmenbreite: 5 Pixel; Rahmenstil: fest; Höhe: 0 ; Breite: 0; Rand: 7 Pixel durchgehend transparent; border-right: 7px solide #fff; Rahmenfarbe: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;) /* Erscheinen eines versteckten Elements beim Hover */ .hover:hover + .hidden(display: block;)
Diese beiden Optionen können auf Ihrer Website verwendet werden, um einen Tooltip anzuzeigen, wenn Sie mit dem Mauszeiger darüber fahren.
Es gibt zwei weitere Methoden, die jedoch nahezu identisch sind, mit der Ausnahme, dass das Element angezeigt wird, wenn Sie auf ein Element klicken, das immer auf der Site angezeigt wird.
Ganz einfach mit Registrierung, per Klick. Bei einem Klick sieht der Code genauso aus. Das Einzige ist, dass ich der Einfachheit halber die Klasse einiger Elemente ersetzt habe. Anstelle von hover wird auch die Pseudoklasse focus verwendet. Es ist hier auch erwähnenswert, dass diese Methode nur dann funktioniert, wenn sie durch ersetzt wird, also durch einen Hyperlink.
?
Der CSS-Code ähnelt in diesem Fall dem Erscheinungsbild eines Blocks beim Schweben, nur der Einfachheit halber werden andere Klassen verwendet. Und für einen ordnungsgemäßen Betrieb ändern wir die Pseudoklasse in focus .
/* Wir verwenden die After-Pseudoklasse, um den Spot selbst zu entwerfen, verstecken ihn aber gleichzeitig, da er nur erscheinen sollte, wenn darauf geklickt wird */ .focus:after (content: attr(data-title); display: none ; Position: absolut; unten: 130 %; links: 0px; Hintergrundfarbe: #fff; Farbe: #3aaeda; Polsterung: 5px; Textausrichtung: Mitte; -moz-box-shadow: 0 1px 1px rgba(0, 0,0,.16) ; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font -size: 12px;) / * Fügen Sie eine Eigenschaft hinzu, sodass beim Klicken auf ein Element ein Hinweisfeld angezeigt wird */ .focus:focus:after(display: block;)
Wie Sie sehen, gibt es praktisch keinen Unterschied.
Tooltip beim Klicken. Diese Klickmethode ist auch relevanter, wenn Sie den Tooltip etwas besser formatieren müssen, als dies mit der vorherigen Option möglich ist.
? Dies ist ein Design-Tipp
Und das eigentliche Design der Matrize:
/* relative Positionierung zum Container festlegen */ .block(position:relative;) /* Entwerfen Sie das standardmäßige ausgeblendete Element */ .hidden (display: none; position: absolute; unten: 130%; links: 0px; Hintergrundfarbe : # fff; Farbe: #3aaeda; Polsterung: 5px; Textausrichtung: Mitte; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); Schriftgröße: 12px;) /* Zusätzliche Dekoration für das versteckte Element (optional) */ .focus + .hidden:before (Inhalt: " "; Position: absolut; oben: 98 %; links: 10 %; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; Breite: 0; Rand: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;) /* Zusätzliche Dekoration des versteckten Elements (optional) * / .focus + .hidden :after (Inhalt: " "; Position: absolut; oben: 100 %; links: 10 %; Rand links: -5 Pixel; Rahmenbreite: 5 Pixel; Rahmenstil: fest; Höhe: 0 ; Breite: 0; Rand: 7 Pixel durchgehend transparent; border-right: 7px solide #fff; Rahmenfarbe: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;) /* Aussehen eines versteckten Elements beim Klicken */ .focus:focus + .hidden(display: block;)
Wie Sie sehen, gibt es nichts Kompliziertes. Darüber hinaus können Sie Statusänderungen sowohl per Hover als auch per Klick organisieren. Allerdings kann ich ehrlich gesagt nicht sagen, wie relevant die Click-to-Click-Methode ist.
Es gibt auch eine Nachahmung des letzten Beispiels mit , aber ihre Verwendung scheint mir speziell für die Organisation eines Tooltips auf Ihrer Website nicht ganz korrekt zu sein. Wenn Sie mir überhaupt nicht zustimmen, freuen wir uns über die Kommentare.
Videolektion – Tooltip ohne Skripte.
Das ist alles für mich. Allen viel Glück.
Layout-Gurus werden in diesem Beitrag wahrscheinlich nichts Neues für sich finden. Dieser Beitrag richtet sich eher an Anfänger im Layout-Design, die wie ich Probleme beim Erstellen und Gestalten universeller Tooltips hatten.
Als ich kürzlich einen kleinen Blog erstellte, stand ich vor der Aufgabe, stilvolle, aber gleichzeitig einfache Tooltips zu erstellen. Nachdem ich verschiedene Möglichkeiten zum Erstellen separater Div-Container für Tooltips oder zum Erstellen von Tooltips mit reinem CSS ausprobiert habe, habe ich eine universelle Lösung gefunden, die den Code nicht überfüllt, browserübergreifend kompatibel ist und gleichzeitig sehr einfach zu implementieren ist.
Wer sich für meine Methode zur Lösung dieses einfachen Problems interessiert, frage ich unter Kat.
Lösung Die Methode, die ich Ihnen anbieten werde, ist recht einfach und effektiv. Funktioniert in allen Browsern, sogar IE 6 (von mir oft getestet). Einfach zu wechseln und bequem. Der Code wird nicht überladen und klar dargestellt. Es kann leicht an Ihre Bedürfnisse angepasst werden. Verzögern Sie beispielsweise die Anzeige eines Tooltips mit setTimeout oder etwas anderem.HTML Angenommen, wir haben eine HTML-Seite mit einem Link. Wenn wir mit der Maus darüber fahren, müssen wir einen Tooltip anzeigen:
Tooltips-Link
Wie Sie vielleicht bereits anhand der Auflistung bemerkt haben, verwende ich den LESS-CSS-Präprozessor.
Wir haben CSS-Stile und Skripte in separate Dateien eingefügt. Wir haben auch einen Link und einen div-Block, der als Container für den Tooltip dient.
Die HTML5-Spezifikation erlaubt die Verwendung benutzerdefinierter Attribute des Datenattributtyps, die einige Informationen über ein Element oder einen Block speichern können. In den Datenattributen speichern wir den Text der Tooltips.
Verknüpfung
Zur Speicherung verwende ich das data-tooltip-Attribut.
Wir sind mit HTML fertig – wir können zu den Stilen übergehen. CSS Ich verwende die LESS Elements-Bibliothek und empfehle sie jedem, daher werde ich einige Eigenschaften mit diesem Framework schreiben.
@import "css/elements.less"; #tooltip ( z-index: 9999; Position: absolut; Anzeige: keine; oben: 0px; links: 0px; Hintergrundfarbe: #000; Polsterung: 5px 10px 5px 10px; Farbe: weiß; .opacity(0.5); . gerundet(5px); )
Aus der Auflistung geht hervor, dass wir in der ersten Zeile LE verbinden, den div#tooltip-Block auf absolute Positionierung setzen und ihn ausblenden. Als nächstes geben wir dem Block eine Hintergrundfarbe und eine Textfarbe, runden die Ecken ab (5 Pixel) und setzen den Transparenzwert auf 50 %. jQuery Jetzt kommt der spaßige Teil – jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// Fertig Ende.
Nun fügen wir alle Elemente mit dem data-tooltip-Attribut zur Auswahl hinzu und wenn wir mit der Maus über das gewünschte Element fahren, erhalten wir den Tooltip-Wert und speichern ihn in einer Variablen. Als nächstes fügen wir den Hinweistext zum #tooltip-Block hinzu, geben ihm die Cursorkoordinaten vom Seitenrand + 5 px und zeigen schließlich den Block mit dem Tooltip an der richtigen Stelle an. Nachdem die Maus das Element verlassen hat, verstecken wir den #tooltip-Block, löschen seinen Inhalt und setzen ihn auf 0;0; zurück. Das ist alles!
Als Ergebnis erhalten wir etwa Folgendes: Demo
Dank dieses einfachen Skripts erhalten alle Elemente auf der Seite, die über das Attribut data-tooltip verfügen, einen Tooltip.
Vielen Dank für Ihre Aufmerksamkeit!
Heute erstellen wir Tooltips mit CSS. Tooltips werden angezeigt, wenn Sie beispielsweise mit der Maus über einen Link fahren, wenn das Titelattribut eine Beschreibung davon enthält.
Tooltips können sowohl für Links als auch für Bilder verwendet werden.
In seiner Rohform sieht der Tooltip so aus:
Der Tooltip wird mit der Standardsystemmethode unter Verwendung des Titelattributs angezeigt.
Standard-Linkcode mit Tooltip ohne Dekoration:
Verknüpfung
Tooltip-CSS Sie können Ihren Tooltip mit CSS gestalten. Wir werden uns drei Optionen ansehen Tooltip in CSS.
Leider gibt es kein CSS-„Rezept“ für die Titelgestaltung, daher müssen wir zusätzliche Attribute hinzufügen, ihr Design festlegen und sie dem Link-/Bildcode hinzufügen, für den wir ein schönes Bild erstellen möchten Tooltip-CSS.
Im ersten Beispiel werden wir es tun Tooltip-CSS oben auf dem Bild ganz unten.
Dazu verwenden wir zwei Attribute: image, und damit der Tooltip funktioniert, verwenden wir ::after und data-text, um den Text des Tooltips anzuzeigen.
CSS-Stile für dieses Beispiel:
Bild ( display: inline-block; position: relative; ) .image:hover::after ( content: attr(data-text); /* Tooltip-Text anzeigen */ position: absolute; links: 0; rechts: 0; unten: 0px; /* Position des Tooltips */ Z-Index: 1; /* Zeigt den Tooltip über anderen Elementen an */ Hintergrund: rgba(0,255,102,0.6); /* Farbe (RGB) und seine Transparenz */ Farbe: # fff; /* Textfarbe */ text-align: center; /* Text zentriert ausrichten */ Schriftfamilie: Arial, serifenlos; /* Schriftfamilie */ Schriftgröße: 11px; / * Tooltip-Textgröße * / Innenabstand: 5 Pixel 10 Pixel; /* Ränder */ Rand: 1 Pixel durchgezogen #333; /* Randoptionen */ )
Dieses Design funktioniert nicht für Links, daher werden wir für sie etwas andere Optionen verwenden.
Bei der ersten Option wird über dem Link ein Tooltip angezeigt.
Podskazka( display: inline; position: relative;).podskazka:hover:after( Hintergrund: #333; Hintergrund: rgba(204,102,0,.8); Randradius: 5px; unten: 26px; Farbe: #fff; Inhalt: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: auto;).podskazka:hover:before( /* Fügen Sie unten im Tooltip einen Pfeil hinzu Block */ Rand: fest; Randfarbe: #cc6600 transparent; Randbreite: 6px 6px 0 6px; unten: 20px; Inhalt: ""; links: 50%; Position: absolut; Z-Index: 99;)
Und die letzte Möglichkeit besteht darin, einen Tooltip unter dem Link anzuzeigen. Die Option ähnelt der vorherigen, nur wird unten der Tooltip angezeigt.
Tooltip ( Position: relativ; /* Das Element zum übergeordneten Element für Tooltips machen */ Cursor: Hilfe;).tooltip span ( Position: absolut; /* Das Element aus dem Fluss nehmen */ margin-left: -30000px; /* Und verstecke es weit hinter dem Bildschirmrand */ Hintergrundfarbe: rgba(0,0,153,.8); /* Hintergrund des Popup-Blocks */ Farbe: #fafafa; /* Textfarbe */ padding:10px; / * Polsterung */ -webkit-border-radius: 5px; /* Ecken abrunden */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;).tooltip:hover span ( /* Beim Hover */ margin-left : 0; /* Bringe den Block vom Rand außerhalb des Bildschirms an seinen Platz zurück */ width: 250px; /* Lege die Breite fest */ z-index: 1000; /* Place ganz oben */ /* Positionieren Sie es relativ zum übergeordneten Block */ top:30px ; /* Oberer Abstand */ left:20px; /* Linker Abstand */ ).tooltip span:after( content: ""; /* Inhalt hinzugefügt */ width:0; /* Versteckt und auf 0 gesetzt */ height :0; border-bottom: 10px solid #000099; /* Verwenden Sie den unteren Rand, um die Farbe und Höhe des Dreiecks festzulegen * / border-right: 30px durchgehend transparent; /* Right – die Breite des Dreiecks nach rechts */ position: absolute; /* Position relativ zum übergeordneten Block */ top:-10px; links:10px;)
