So zeigen, positionieren und style ein Tooltip in HTML und CSS?

Ein Tooltip wird als Element bezeichnet, das zusätzliche Informationen zu einem HTML -Element liefert. Diese zusätzliche Information wird jedes Mal angezeigt, wenn der Benutzer den Mauszeiger über dieses bestimmte Element bringt. Diese Tooltips spielen eine wichtige Rolle bei der Aktualisierung eines Webdesigns, da Sie hindern, zusätzliche Informationen auf der Webseite anzuzeigen, die sonst möglicherweise nicht gut aussehen. In diesem Artikel werden wir aufklären, wie man einen Tooltip in HTML und CSS zeigt, positioniert und style.

Bevor wir uns mit anderen Details zu einem Tooltip eintauchen, erfahren wir zunächst, wie Sie einen primären Tooltip erstellen.

So erstellen/zeigen Sie einen Tooltip

Das folgende Beispiel zeigt, wie ein grundlegender Tooltip erstellt wird.

Html

Bring Maus über mich Tooltip -Text

Im obigen Code haben wir ein DIV -Element erstellt und einige Inhalte darin platziert und ein Spannelement verwendet. Beachten Sie, dass dem Div den Klassen -Tooltip zugewiesen wurde. Inzwischen wurde das Span -Element der Klassen -TooltipText erhalten.

CSS

.Tooltip
Position: Relativ;
Anzeige: Inline-Block;

.Tooltip .TooltipText
Sichtbarkeit: versteckt;
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Border-Radius: 7px;
Polsterung: 5px 10px;
Position: absolut;
Z-Index: 1;

.Tooltip: Schwebe .TooltipText
Sichtbarkeit: sichtbar;

Hier geben wir dem DIV-Element eine relative Position, um den Tooltip-Text zu positionieren und ihn als Inline-Block-Element anzuzeigen, sodass der Tooltip direkt neben dem DIV-Element platziert wird. Darüber hinaus passen wir in Bezug auf diese Div die Position des Tooltip als absolut an. Darüber hinaus ist die Sichtbarkeit des Tooltip versteckt, aber wenn der Maus -Cursor über das Div -Element gebracht wird, ist das Tooltip sichtbar.

Ausgang

Ein Tooltip wurde erfolgreich erstellt.

Nachdem wir wissen, wie man einen Tooltip erstellt, lassen Sie uns untersuchen, wie Sie den Tooltip positionieren.

So positionieren Sie einen Tooltip

Es gibt vier Arten von Positionen, die Sie einem Tooltip zuweisen können, und diese werden unten erwähnt.

1. Spitze
2. Unterseite
3. Links
4. Rechts

Alle diese Positionen werden unten mit Hilfe von Beispielen nachgewiesen.

So positionieren Sie einen Tooltip oben

Zum Zweck der Positionierung eines Tooltips oben werden wir das oben verwendete Beispiel verwenden.

CSS

.Tooltip
Position: Relativ;
Anzeige: Inline-Block;

.Tooltip .TooltipText
Sichtbarkeit: versteckt;
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Border-Radius: 7px;
Polsterung: 5px 10px;
/ * So setzen Sie die obere Position des Tooltip */
Position: absolut;
Z-Index: 1;
unten: 100%;
Links: 60%;
Rand -Links: -65px;

.Tooltip: Schwebe .TooltipText
Sichtbarkeit: sichtbar;

Zum Zwecke der Positionierung des Tooltip verwenden wir den absoluten Wert der Positionseigenschaft, damit er in Bezug auf das DIV -Element platziert werden kann. Um es vor das Element zu stellen, geben wir ihm eine Stapelreihenfolge von 1 mit der Z-Index-Eigenschaft. Um es genau über dem Element zu platzieren, haben wir die Eigenschaften unten, links und links eingestellt.

Ausgang

Der Tooltip wurde die oberste Position erhalten.

So positionieren Sie einen Tooltip unten

Um ein Tooltip unten zu positionieren.

CSS

.Tooltip
Position: Relativ;
Anzeige: Inline-Block;

.Tooltip .TooltipText
Sichtbarkeit: versteckt;
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Border-Radius: 7px;
Polsterung: 5px 10px;/ * So setzen Sie die untere Position des Tooltip */
Position: absolut;
Z-Index: 1;
Top 100%;
Links: 60%;
Rand -Links: -65px;

.Tooltip: Schwebe .TooltipText
Sichtbarkeit: sichtbar;

Der absolute Wert der Position Eigenschaft positioniert den Tooltip in Bezug auf das Div -Element. Darüber hinaus ist die Stapelordnung des Tooltip auf 1 eingestellt, um ihn vor den Div -Behälter zu stellen. Darüber hinaus haben wir genau unter das Element platziert, das wir die Eigenschaften der oberen, linken und margen-links eingestellt haben.

Ausgang

Der Tooltip wurde unten positioniert.

So positionieren Sie ein Tooltip nach links

Wenn Sie Ihr Tooltip links von einem Element positionieren möchten, wenden Sie sich an das folgende Beispiel.

CSS

.Tooltip
Position: Relativ;
Anzeige: Inline-Block;

.Tooltip .TooltipText
Sichtbarkeit: versteckt;
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Border-Radius: 7px;
Polsterung: 5px 10px;
/ * So setzen Sie die linke Position des Tooltip */
Position: absolut;
Z-Index: 1;
Top: -6px;
Rechts: 102%;

.Tooltip: Schwebe .TooltipText
Sichtbarkeit: sichtbar;

Abgesehen von der Position und Z-Index-Eigenschaften verwenden wir die oberen und die rechten Eigenschaften sowie die Tooltip genau links vom angegebenen Element.

Ausgang

Erfolgreich den Tooltip links positioniert.

So positionieren Sie ein Tooltip nach rechts

Hier haben wir gezeigt, wie Sie ein Tooltip rechts von einem Element positionieren können.

CSS

.Tooltip
Position: Relativ;
Anzeige: Inline-Block;

.Tooltip .TooltipText
Sichtbarkeit: versteckt;
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Border-Radius: 7px;
Polsterung: 5px 10px;/ * Um die richtige Position des Tooltip */einzustellen
Position: absolut;
Z-Index: 1;
Top: -6px;
Links: 102%;

.Tooltip: Schwebe .TooltipText
Sichtbarkeit: sichtbar;

Hier verwenden wir die oberen und linken Eigenschaften, um die Position des Tooltip rechts eines Elements einzustellen.

Ausgang

Der Tooltip wurde nach rechts eingestellt.

So stylen Sie einen Tooltip

In den obigen Beispielen haben wir den Tooltip mit einigen grundlegenden CSS-Eigenschaften wie Hintergrundfarbe, Farbe, Text-Align, Border-Radius und Polsterung gestylt. Es gibt jedoch auch andere Möglichkeiten, einen Tooltip zu stylen. Hier haben wir Ihnen einige von ihnen gezeigt.

Hinzufügen eines Pfeils zum Tooltip

Betrachten Sie zum Zweck des Hinzufügens eines Pfeils wie einer Blasenrede das folgende Beispiel.

CSS

.Tooltip
Position: Relativ;
Anzeige: Inline-Block;

.Tooltip .TooltipText
Sichtbarkeit: versteckt;
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Border-Radius: 7px;
Polsterung: 5px 10px;
Position: absolut;
Z-Index: 1;
unten: 150%;
Links: 50%;
Rand -Links: -60px;

.Tooltip .TooltipText :: After
Inhalt: "";
Position: absolut;/ *, um den Tooltip */zu positionieren
Top 100%;
Links: 50%;
Rand -Links: -6px;
/ * Um einen Pfeil hinzuzufügen *//
Grenze: 6px fest;
Grenzfarbe: Rosybrown transparent transparent transparent;

.Tooltip: Schwebe .TooltipText
Sichtbarkeit: sichtbar;

Hier verwenden wir das: Nach Pseudoelement, um den Pfeil von einer bestimmten Seite des Tooltips anzuzeigen, ist der Inhalt nach dem Tooltip leer. Um den Pfeil jedoch zu erstellen, wird die Grenzeigenschaft verwendet. Um den Pfeil in der Mitte des Tooltips zu halten, sollten die Eigenschaften der Grenzbreit- und Rand-Links das gleiche, aber entgegengesetzte in den Vorzeichenwerten verabreicht werden.

Wir nutzen die Rand-Color-Eigenschaft, um jedem Rand des Pfeils Farbe zu verleihen. Nur der obere Rand erhält die Farbe Rosybrown und der Rest ist transparent eingestellt. Wenn diese alle etwas Farbe hätten, würde der Pfeil als Quadrat erscheinen.

Schließlich wurde der Tooltip und der Pfeil über dem Element platziert. Wenn Sie den Tooltip zusammen mit einem Pfeil an eine andere Position positionieren möchten, wenden Sie sich an die oben angegebenen Beispiele.

Ausgang

Erfolgreich einen Pfeil zum Tooltip hinzugefügt.

So fügen Sie dem Tooltip einen Auswirkungen auf

Um einen bestimmten Effekt zu erzielen, beispielsweise eine Auswirkung des Tooltip, betrachten Sie das folgende Beispiel.

CSS

.Tooltip
Position: Relativ;
Anzeige: Inline-Block;

.Tooltip .TooltipText
Sichtbarkeit: versteckt;
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Border-Radius: 7px;
Polsterung: 5px 10px;
Position: absolut;
Z-Index: 1;
unten: 150%;
Links: 50%;
Rand-Links: -60px;/ *, um dem Tooltip */einen Fade-In-Effekt zu verleihen */
Deckkraft: 0;
Übergang: Deckkraft 2s;

.Tooltip: Schwebe .TooltipText
Sichtbarkeit: sichtbar;
Deckkraft: 1;

Im obigen Code wird die Übergangseigenschaft zusammen mit der Eigenschaft der Opazität verwendet. Die Dauer des Übergangs wurde auf 2 Sekunden eingestellt, was bedeutet, dass es 2 Sekunden dauert, bis der Tooltip von unsichtbar bis vollständig sichtbar ist.

Ausgang

Der Auswirkung funktioniert ordnungsgemäß.

Abschluss

Ein Tooltip wird als Element bezeichnet, das jedes Mal zusätzliche Informationen zu einem Element liefert, wenn ein Maus -Cursor über dieses Element gebracht wird. Um einem Element einen Tooltip hinzuzufügen, wird die Position des Positions anhand des Ortes verwendet, an dem Sie den Tooltip anzeigen möchten. Außerdem können Sie dem Tooltip einen Pfeil oder einen verblassenden Effekt hinzufügen, um ihm einen gewissen Stil zu verleihen. In diesem Artikel haben wir aufgeklärt, wie man einen Tooltip mit HTML und CSS zeigt, positioniert und style.