Afficher un message d'info-bulle au survol à l'aide de jQuery
- Info-bulle jQuery-UI
-
Utilisez la méthode
tooltip()avec le paramètreoptionspour afficher un message d’info-bulle au survol à l’aide de jQuery -
Utilisez la méthode
tooltip()avec le paramètreactionspour afficher un message d’info-bulle au survol à l’aide de jQuery
L’info-bulle est un widget de jQuery-UI utilisé pour ajouter de nouveaux thèmes et permettre la personnalisation. Ce tutoriel montre comment utiliser l’info-bulle jQuery-UI.
Info-bulle jQuery-UI
L’info-bulle de jQuery est utilisée pour permettre la personnalisation et créer de nouveaux thèmes. Les info-bulles sont attachées à n’importe quel élément ; pour les afficher, on leur ajoute un attribut title, qui servira d’infobulle.
Lorsque nous survolons cet élément, l’info-bulle avec l’attribut title sera visible. Le jQuery-UI fournit une méthode tooltip(), qui peut ajouter des info-bulles à n’importe quel élément.
La méthode tooltip() donne une animation de fondu, par défaut, lors de l’affichage et du masquage de l’info-bulle.
La syntaxe de cette méthode est :
Method 1:
$(selector, context).tooltip (options)
Method 2:
$(selector, context).tooltip ("action", [params])
Il existe deux manières d’utiliser la méthode tooltip().
Utilisez la méthode tooltip() avec le paramètre options pour afficher un message d’info-bulle au survol à l’aide de jQuery
La première méthode avec le paramètre options est utilisée pour spécifier le comportement et l’apparence de l’info-bulle. Le paramètre options peut être inséré plusieurs fois et a plusieurs types.
Le tableau ci-dessous présente le type d’options :
| Option | La description |
|---|---|
content |
Cette option représente le contenu de l’infobulle avec la valeur par défaut de la fonction, qui renvoie l’attribut title. |
disabled |
Cette option est utilisée pour désactiver l’info-bulle avec des valeurs vraies ou fausses. |
hide |
Cette option représente l’animation d’une info-bulle lorsqu’elle est masquée. Les valeurs sont vraies ou fausses. |
show |
Cette option représente l’animation de l’info-bulle tout en l’affichant. Les valeurs sont vraies ou fausses. |
track |
Cette option suit la souris lorsque vous travaillez avec des info-bulles. La valeur par défaut est faux. |
items |
Cette option est utilisée pour choisir quel élément affichera l’info-bulle. La valeur par défaut est title |
position |
Cette option est utilisée pour décider de la position de l’info-bulle. La valeur par défaut est la fonction renvoyant l’attribut title. |
tooltip class |
Cette option représente une classe qui peut être ajoutée à l’infobulle. Il peut représenter l’avertissement ou les erreurs ; la valeur par défaut de cette option est null. |
Essayons d’abord un exemple simple tooltip() sans paramètres. Assurez-vous d’importer l’interface utilisateur jQuery pour que la méthode tooltip() puisse fonctionner.
Voir exemple :
<!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>
Le code ci-dessus affichera l’info-bulle sur la saisie de texte et l’étiquette. Voir la sortie :
Maintenant, essayons un exemple avec les options content, disabled, et 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>
Le code ci-dessus illustre l’utilisation des options content, track, et disabled. Voir la sortie :
Essayons un autre exemple avec l’option position. Voir exemple :
<!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>
Le code ci-dessus montre la démo de l’option position, qui ajoute une astuce à l’info-bulle. Voir la sortie :
De même, d’autres options peuvent être utilisées aux fins décrites dans le tableau ci-dessus. Voyons maintenant la méthode 2.
Utilisez la méthode tooltip() avec le paramètre actions pour afficher un message d’info-bulle au survol à l’aide de jQuery
La méthode $ (selector, context).tooltip ("action", [params]) va effectuer les actions sur les éléments en désactivant par exemple l’infobulle. action représente une chaîne dans le premier argument, et params sera fourni en fonction des actions données.
Il existe plusieurs types d’actions, qui sont présentées ci-dessous dans le tableau :
| Action | La description |
|---|---|
close |
Cette action permet de fermer l’info-bulle. Il n’a pas d’arguments. |
destroy |
Cette action supprimera complètement l’info-bulle. Il n’a pas d’arguments. |
disable |
Cette action désactivera l’info-bulle. Il n’a pas d’arguments. |
enable |
Cette action activera l’info-bulle. Il n’a pas d’arguments. |
open |
Cette action ouvrira l’info-bulle par programmation. Aucun argument. |
option() |
Cette action obtiendra les paires clé-valeur représentant le hachage actuel de l’option d’info-bulle. |
option(Options) |
Cette action permet de définir les options de l’info-bulle. |
option(OptionName) |
Cette action consiste à obtenir la valeur de OptionName. Aucun autre argument. |
option(OptionName, value) |
Cette action définira la valeur de OptionName en fonction de la valeur donnée. |
widget |
Cette action renverra un objet jQuery contenant l’élément d’origine. Aucun argument. |
Essayons un exemple simple pour l’action open et close, qui maintiendra l’info-bulle ouverte en appuyant sur le bouton et en la fermant lors d’une autre pression sur le bouton. Voir exemple :
<!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>
Le code ci-dessus ouvrira et fermera l’info-bulle sur les clics de bouton. Voir la sortie :
Maintenant, essayons un exemple pour l’action widget. La méthode widget est utilisée pour obtenir l’instance de jQuery-UI.
Voir exemple :
<!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>
Le code ci-dessus utilisera la méthode widget pour obtenir l’instance de jQuery-UI. Voir la sortie :
De même, les autres actions peuvent également être utilisées aux fins décrites dans le tableau.
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