Anzeige einer Tooltip-Meldung bei Hover mit jQuery
- jQuery-UI-Tooltip
-
Verwenden Sie die Methode
tooltip()mit dem Parameteroptions, um mit jQuery eine Tooltip-Nachricht beim Hover anzuzeigen -
Verwenden Sie die Methode
tooltip()mit dem Parameteractions, um eine QuickInfo-Nachricht beim Hover mit jQuery anzuzeigen
Der Tooltip ist ein Widget von jQuery-UI, das verwendet wird, um neue Themen hinzuzufügen und eine Anpassung zu ermöglichen. Dieses Tutorial demonstriert die Verwendung des jQuery-UI Tooltip.
jQuery-UI-Tooltip
Der Tooltip von jQuery wird verwendet, um Anpassungen zu ermöglichen und neue Themen zu erstellen. Die Tooltips werden an jedes Element angehängt; Um sie anzuzeigen, fügen wir ihnen ein title-Attribut hinzu, das als Tooltip verwendet wird.
Wenn wir den Mauszeiger über dieses Element bewegen, wird der Tooltip mit dem Attribut title sichtbar. Das jQuery-UI stellt eine Methode tooltip() zur Verfügung, die jedem Element Tooltips hinzufügen kann.
Die Methode tooltip() gibt beim Ein- und Ausblenden des Tooltip standardmäßig eine Fade-Animation aus.
Die Syntax für diese Methode lautet:
Method 1:
$(selector, context).tooltip (options)
Method 2:
$(selector, context).tooltip ("action", [params])
Es gibt zwei Möglichkeiten, die Methode tooltip() zu verwenden.
Verwenden Sie die Methode tooltip() mit dem Parameter options, um mit jQuery eine Tooltip-Nachricht beim Hover anzuzeigen
Die erste Methode mit dem Parameter options dient dazu, das Verhalten und Aussehen des Tooltips festzulegen. Der Parameter Optionen kann mehrfach eingefügt werden und hat mehrere Typen.
Die folgende Tabelle zeigt die Art der Optionen:
| Option | Beschreibung |
|---|---|
content |
Diese Option stellt den Inhalt des Tooltips mit dem Standardwert der Funktion dar, der das Attribut title zurückgibt. |
disabled |
Diese Option wird verwendet, um den Tooltip mit wahren oder falschen Werten zu deaktivieren. |
hide |
Diese Option repräsentiert die Animation eines Tooltips beim Ausblenden. Die Werte sind wahr oder falsch. |
show |
Diese Option stellt die Animation des Tooltips dar, während er angezeigt wird. Die Werte sind wahr oder falsch. |
track |
Diese Option verfolgt die Maus beim Arbeiten mit Tooltips. Der Standardwert ist falsch. |
items |
Diese Option wird verwendet, um auszuwählen, welches Element den Tooltip anzeigt. Der Standardwert ist Titel |
position |
Diese Option wird verwendet, um die Position des Tooltips festzulegen. Der Standardwert ist die Funktion, die das Titelattribut zurückgibt. |
tooltip class |
Diese Option stellt eine Klasse dar, die dem Tooltip hinzugefügt werden kann. Es kann die Warnung oder Fehler darstellen; Der Standardwert dieser Option ist null. |
Versuchen wir es zunächst mit einem einfachen tooltip()-Beispiel ohne Parameter. Stellen Sie sicher, dass Sie die jQuery-UI importieren, damit die Methode tooltip() funktionieren kann.
Siehe Beispiel:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script>
$(function() {
$("#Demotooltip1").tooltip();
$("#Demotooltip2").tooltip();
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip1" title = "Please Type Something">
<p><label id = "Demotooltip2" title = "This is tooltip Demo"> Hover Here to See Tooltip </label></p>
</body>
</html>
Der obige Code zeigt den Tooltip auf der Texteingabe und dem Label an. Siehe Ausgabe:
Versuchen wir nun ein Beispiel mit den Optionen content, disabled und track:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#Demotooltip1" ).tooltip({
content: "Tooltip from Content",
track:true
}),
$( "#Demotooltip2" ).tooltip({
disabled: true
});
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip1" title = "Original">
<br><br>
Disabled Tooltip: <input id = "Demotooltip2" title = "Demotooltip">
</body>
</html>
Der obige Code demonstriert die Verwendung der Optionen content, track und disabled. Siehe Ausgabe:
Versuchen wir ein weiteres Beispiel mit der Option position. Siehe Beispiel:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
body {
margin-top: 50px;
}
.ui-tooltip-content::after, .ui-tooltip-content::before {
position: absolute;
content: "";
display: block;
left: 100px;
border-style: solid;
}
.ui-tooltip-content::before {
bottom: -5px;
border-width: 5px 5px 0;
border-color: #AAA transparent;
}
.ui-tooltip-content::after {
bottom: -7px;
border-width: 10px 10px 0;
border-color: white transparent;
}
</style>
<script>
$(function() {
$( "#Demotooltip" ).tooltip({
position: {
my: "center bottom",
at: "center top-10",
collision: "none"
}
});
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip" title = "Please Type Something.">
</body>
</html>
Der obige Code zeigt die Demo der Option position, die dem Tooltip einen Tipp hinzufügt. Siehe Ausgabe:
Ebenso können andere Optionen für den in der obigen Tabelle beschriebenen Zweck verwendet werden. Sehen wir uns nun Methode 2 an.
Verwenden Sie die Methode tooltip() mit dem Parameter actions, um eine QuickInfo-Nachricht beim Hover mit jQuery anzuzeigen
Die Methode $ (selector, context).tooltip ("action", [params]) führt die Aktionen an den Elementen aus, z. B. das Deaktivieren des Tooltip. Die action stellt eine Zeichenfolge im ersten Argument dar, und params wird basierend auf den angegebenen Aktionen bereitgestellt.
Es gibt mehrere Arten von Aktionen, die unten in der Tabelle aufgeführt sind:
| Aktion | Beschreibung |
|---|---|
close |
Diese Aktion wird verwendet, um den Tooltip zu schließen. Es hat keine Argumente. |
destroy |
Diese Aktion entfernt den Tooltip vollständig. Es hat keine Argumente. |
disable |
Diese Aktion deaktiviert den Tooltip. Es hat keine Argumente. |
enable |
Diese Aktion aktiviert den Tooltip. Es hat keine Argumente. |
open |
Diese Aktion öffnet den Tooltip programmgesteuert. Keine Argumente. |
option() |
Diese Aktion ruft die Schlüssel-Wert-Paare ab, die den aktuellen Tooltip-Options-Hash darstellen. |
option(Options) |
Diese Aktion wird verwendet, um die Optionen für den Tooltip festzulegen. |
option(OptionName) |
Diese Aktion soll den Wert von OptionName erhalten. Keine weiteren Argumente. |
option(OptionName, value) |
Diese Aktion setzt den Wert von OptionName entsprechend dem angegebenen Wert. |
widget |
Diese Aktion gibt ein jQuery-Objekt zurück, das das ursprüngliche Element enthält. Keine Argumente. |
Versuchen wir ein einfaches Beispiel für die Aktionen open und close, die den Tooltip durch Drücken der Schaltfläche geöffnet halten und bei einem weiteren Tastendruck schließen. Siehe Beispiel:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$("#Demotooltip").tooltip({
//the 'of' keyword will be used to link the tooltip to the specified input
position: { of: '#DemoInput', my: 'left center', at: 'left center' },
}),
$('#DemoButton1').click(function () {
$('#Demotooltip').tooltip("open");
});
$('#DemoButton2').click(function () {
$('#Demotooltip').tooltip("close");
});
});
</script>
</head>
<body >
<label id = "Demotooltip" title = "Open and Close"></label>
<input id = "DemoInput" type = "text" size = "20" />
<input id = "DemoButton1" type = "submit" value = "Click to Show" />
<input id = "DemoButton2" type = "submit" value = "Click to Hide" />
</body>
</html>
Der obige Code öffnet und schließt den Tooltip bei Klicks auf die Schaltfläche. Siehe Ausgabe:
Versuchen wir nun ein Beispiel für die Aktion widget. Die Methode widget wird verwendet, um die Instanz von jQuery-UI zu erhalten.
Siehe Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href= "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src= "https://code.jquery.com/jquery-1.10.2.js"> </script>
<script src= "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
<script>
$(function () {
$("#Demo2").tooltip({
track: true,
});
$("#Demo1").click(function () {
var a = $("#Demo2").tooltip("widget");
console.log(a);
});
});
</script>
</head>
<body>
<h1 style="color: lightblue">DELFTSTACK</h1>
<input id="Demo1" type="submit" name="delftstack" value="click" />
<span id="Demo2" title="delftstack"> Click Me</span>
</body>
</html>
Der obige Code verwendet die widget-Methode, um die Instanz von jQuery-UI abzurufen. Siehe Ausgabe:
Ebenso können auch die anderen Aktionen für den in der Tabelle beschriebenen Zweck verwendet werden.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook