Heim > Artikel > Web-Frontend > HTML-Tooltip
HTML-Tooltip
- 王林Original
- 2024-09-04 16:41:45918Durchsuche
Tooltip ist ein Konzept, das in HTML verwendet wird, um zusätzliche Informationen über das speziell ausgewählte Element anzuzeigen. Dies kann mit dem Mouse-Hover-Effekt erfolgen, wenn der Benutzer die Maus über ein Element bewegt, das einen Tooltip verwendet, um bestimmte Informationen zu diesem Element anzuzeigen.
Es wird als Inline-Element wie span verwendet, manchmal mit Klassen-Tooltip-Text. Mithilfe von CSS kann man eine Position für den Tooltip-Text festlegen, was uns dabei hilft, einen Stil und eine Position für unseren Tooltip zu definieren. Die Verwendung eines Tooltips für unsere Webseiten hilft uns, mehr mit dem Benutzer zu interagieren, da er kurze Informationen zu den enthaltenen Elementen liefert.
Syntax
HTML verwendet eine Methode, die Tooltips definiert, indem der Link mit einem Titelattribut verwendet wird. Es kann wie folgt definiert werden:
<a href="" title="tooltip_text"> Content </a>
Wie in der obigen Syntax gezeigt, wird der im Titelattribut angezeigte Text als Tooltip-Text betrachtet. Benutzer können also auf diesen Link klicken, um weitere Informationen dazu anzuzeigen.
Der Titel wird als globales Attribut betrachtet, sodass der Benutzer ihn problemlos zum Element hinzufügen kann, was so einfach ist wie das Hinzufügen einer Klasse oder ID zum Element. Mit dessen Hilfe kann man einfach alles hinzufügen, also einen Absatz, einen Div-Block, der eine ganze Spalte enthält, und vieles mehr. Grundsätzlich wird oben am Element ein Tooltip angezeigt. Man kann den Tooltip an der Position oben, unten, links oder rechts platzieren. Diese Position wird ihrem Tooltip hinzugefügt, indem ein in CSS definierter Wert verwendet wird.
Wie füge ich einen Tooltip in HTML hinzu?
Tooltip kann dem Element in HTML hinzugefügt werden. Es verwendet auch Elemente wie div, absatz und viele andere. Immer wenn die Maus über dieses bestimmte Attribut fährt, werden Text oder andere Informationen angezeigt, die als Tooltip bezeichnet werden. Es kann rechts, links, oben oder unten an jeder beliebigen Stelle des Textes angezeigt werden. Dies ist wie folgt:
1. Spitzenposition
In dieser Position wird oben im Element ein Tooltip angezeigt.
Code:
.tooltip.tooltiptext{
width: 160px;
bottom:80%;
left:40%;
margin-left: 80px;
}
2. Richtige Position
Dieser Tooltip-Code wird auf der rechten Seite des Elements angezeigt.
Code:
.tooltip.tooltiptext{
top:4px;
left:100%;
}
3. Linke Position
Dieser Tooltip-Code wird auf der linken Seite des Elements angezeigt.
Code:
.tooltip.tooltiptext{
top:4px;
right:100%;
}
4. Untere Position
In dieser Position wird der Tooltip am unteren Rand des Elements angezeigt.
Code:
.tooltip.tooltiptext{
width: 160px;
top:100%;
left:40%;
margin-left: 80px;
}
Man kann auch einen Pfeil-Tooltip für das Element anzeigen, indem man diese darin definierte Tooltip-Funktion verwendet. Der HTML-Tooltip hilft auch beim Öffnen der verlinkten Webseite, verwandter Dokumente oder Bilder. Wir können anzeigen, dass durch die Verwendung von Tooltips ein Tooltip mit Einblendung angezeigt wird, genau wie bei einem Animationseffekt. Wir können dies tun, indem wir Code wie folgt verwenden:
Code:
.tooltip.tooltiptext{
opacity:0;
transition: opacity 5s;
}
.tooltip:hover.tooltiptext{
opacity:0;
Das Wichtigste können wir tun, indem wir einen Tooltip verwenden, um eine modale Box zu öffnen, indem wir auf einen einzelnen Tooltip klicken. Diese Art von Code wird meist dann verwendet, wenn es erforderlich ist, Formulare oder andere Details über einen einfachen Link zu öffnen. Dies wird als die einfachste Möglichkeit angesehen, Modal mit minimalem Code zu öffnen.
Beispiele für HTML-Tooltip
Unten finden Sie Beispiele für HTML-Tooltips:
Beispiel #1
Dies ist ein Beispiel für die Anzeige der Position eines Tooltips mit den Werten Rechts und Links.
HTML-Code:
<!DOCTYPE html>
<html>
<style>
/*right position*/
.tooltipright{
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipright .toolttext {
visibility: hidden;
width: 200px;
height:100px;
background-color:lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 8px ;
/* Position the tooltip */
position: absolute;
z-index: 0;
left: 110%;
}
.tooltipright .toolttext {
visibility: visible;
}
/*left position*/
.tooltipleft{
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipleft .toolttextleft {
visibility: hidden;
width: 200px;
height:50px;
background-color:lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 5px ;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 130%;
}
.tooltipleft:hover .toolttextleft {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Tooltip with different Position</h2>
<p style="color :crimson;">Tooltip with Right position</p>
<div class="tooltipright">What is Web Development?
<span class="toolttext">Web Development is a technology used for developing websites, Designing Single page application's webpage etc.</span>
</div>
<br>
<p style="color :crimson;">Tooltip with Left position</p>
<div class="tooltipleft">What is HTML?
<span class="toolttextleft">HTML is markup language for designing web pages for browser. </span>
</div>
</body>
</html>
Ausgabe:
Beispiel #2
Dieses Beispiel zeigt, dass wir Tooltips sowohl für einige Links als auch für Bilder verwenden können. Wenn der Benutzer also mit der Maus darüber fährt, werden Informationen oder ein anklickbarer Link zum Öffnen einer anderen Webseite oder eines anderen Dokuments angezeigt.
HTML-Code:
<html> <head> <title>HTML tooltip</title> </head> <body> <h4>HTMl Tooptip working on Image and Link</h4> <img src="../Desktop/EDUCBA.png" title="EDUCBA"/ style="height:100px; width:300px;"> <br/> <a href="https://www.educba.com/" title="All About EDUCBA."> Online Training and Video Courses</a> </body> </html>
Ausgabe:
Immer wenn der Benutzer auf einen bestimmten Link klickt, wird eine verlinkte Webseite wie folgt angezeigt:
Beispiel #3
Wenn wir beim Hovern oder Klicken auf bestimmte Elemente ein Popup anzeigen möchten, ist ein Tooltip die beste Option, um dies einfach zu handhaben.
HTML-Code:
<html>
<head>
<title>HTML tooltip</title>
</head>
<style>
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 160px;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px ;
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -85px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #856 transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
</style>
<body style="padding:100px;">
<div class="arrowpopup" onclick="myFunction()">Tooltip Demo Click here!
<span class="tooltiptext" id="tooltipdemo">HTML Tooltip helps you to display extra information of element.</span>
</div>
<script>
function myFunction() {
var tt = document.getElementById("tooltipdemo");
tt.classList.toggle("show");
}
</script>
</body>
</html>
Ausgabe:
Fazit
Aus all den oben genannten Informationen haben wir erkannt, dass Tooltip eine Funktion in HTML ist, die dazu dient, einige verwandte Informationen oder kurze Beschreibungen eines ausgewählten Elements anzuzeigen. Je nach Wahl des Benutzers kann er entscheiden, wo dieser Tooltip je nach Element angezeigt werden soll. Der Positionswert ist rechts, links, oben oder unten.
Das obige ist der detaillierte Inhalt vonHTML-Tooltip. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!