JqueryUI - Info-bulle

Le widget info-bulle de jQueryUI remplace les info-bulles natives. Ce widget ajoute de nouveaux thèmes et permet une personnalisation. Voyons d'abord ce que sont les info-bulles? Les info-bulles peuvent être attachées à n'importe quel élément. Pour afficher les info-bulles, ajoutez simplement l' attribut title aux éléments d'entrée et la valeur d'attribut title sera utilisée comme info-bulle. Lorsque vous survolez l'élément avec votre souris, l'attribut title est affiché dans une petite boîte à côté de l'élément.

jQueryUI fournit tooltip()pour ajouter une info-bulle à tout élément sur lequel vous souhaitez afficher une info-bulle. Cela donne une animation de fondu par défaut pour afficher et masquer l'info-bulle, par rapport au simple basculement de la visibilité.

Syntaxe

le tooltip() La méthode peut être utilisée sous deux formes -

$ (selector, context) .tooltip (options), méthode
$ (selector, context) .tooltip ("action", [params]), méthode

$ (selector, context) .tooltip (options), méthode

La méthode tooltip (options) déclare qu'une info-bulle peut être ajoutée à un élément HTML. Le paramètre options est un objet qui spécifie le comportement et l'apparence de l'info-bulle.

Syntaxe

$(selector, context).tooltip(options);

Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -

$(selector, context).tooltip({option1: value1, option2: value2..... });

Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -

Sr.No.	Option et description
1	contenu Cette option représente le contenu d'une info-bulle. Par défaut, sa valeur estfunction returning the title attribute. Option - content Cette option représente le contenu d'une info-bulle. Par défaut, sa valeur estfunction returning the title attribute. Cela peut être de type - Function- Le callback peut soit retourner directement le contenu, soit appeler le premier argument, en passant le contenu, par exemple. pour le contenu ajax. String - Une chaîne de HTML à utiliser pour le contenu de l'info-bulle. Syntax `$(".selector").tooltip( { content: "Some content!" } );`
2	désactivée Cette option, lorsqu'elle est définie sur true, désactive l'info-bulle. Par défaut, sa valeur estfalse. Option - disabled Cette option, lorsqu'elle est définie sur true, désactive l'info-bulle. Par défaut, sa valeur estfalse. Syntax `$(".selector").tooltip( { disabled: true } );`
3	cacher Cette option représente l'effet d'animation lors du masquage de l'info-bulle. Par défaut, sa valeur esttrue. Option - hide Cette option représente l'effet d'animation lors du masquage de l'info-bulle. Par défaut, sa valeur esttrue. Cela peut être de type - Boolean- Cela peut être vrai ou faux . Lorsqu'elle est définie sur true , l'info-bulle disparaîtra avec la durée par défaut et l'accélération par défaut. Number - L'info-bulle disparaîtra avec la durée spécifiée et l'accélération par défaut. String- L'info-bulle sera masquée en utilisant l'effet spécifié tel que "slideUp", "fold" . Object- Les valeurs possibles sont l' effet, le délai, la durée et l' accélération . Syntax `$(".selector").tooltip( { hide: { effect: "explode", duration: 1000 } } );`
4	articles Cette option indique quels éléments peuvent afficher des info-bulles. Par défaut, sa valeur est[title]. Option - items Cette option indique quels éléments peuvent afficher des info-bulles. Par défaut, sa valeur est[title]. Syntax `$(".selector").tooltip( { items: "img[alt]" } );`
5	position Cette option décide de la position de l'info-bulle par rapport à l'élément cible associé. Par défaut, sa valeur estfunction returning the title attribute. Les valeurs possibles sont: my, at, of, collision, using, within. Option - position Cette option décide de la position de l'info-bulle par rapport à l'élément cible associé. Par défaut, sa valeur estfunction returning the title attribute. Les valeurs possibles sont: my, at, of, collision, using, within. Syntax `$(".selector").tooltip( { { my: "left top+15", at: "left bottom", collision: "flipfit" } } );`
6	spectacle Cette option représente comment animer l'affichage de l'info-bulle. Par défaut, sa valeur esttrue. Option - show Cette option représente comment animer l'affichage de l'info-bulle. Par défaut, sa valeur esttrue. Cela peut être de type - Boolean- Cela peut être vrai ou faux . Lorsqu'elle est définie sur true , l'info-bulle disparaîtra avec la durée par défaut et l'accélération par défaut. Number - L'info-bulle disparaîtra avec la durée spécifiée et l'accélération par défaut. String- L'info-bulle sera masquée en utilisant l'effet spécifié tel que "slideUp", "fold" . Object- Les valeurs possibles sont l' effet, le délai, la durée et l' accélération . Syntax `$(".selector").tooltip( { show: { effect: "blind", duration: 800 } } );`
sept	tooltipClass Cette option est une classe qui peut être ajoutée au widget info-bulle pour les info-bulles telles que les avertissements ou les erreurs. Par défaut, sa valeur estnull. Option - tooltipClass Cette option est une classe qui peut être ajoutée au widget info-bulle pour les info-bulles telles que les avertissements ou les erreurs. Par défaut, sa valeur estnull. Syntax `$(".selector").tooltip( { tooltipClass: "custom-tooltip-styling" } } );`
8	Piste Cette option, lorsqu'elle est définie sur true , l'info-bulle suit / suit la souris. Par défaut, sa valeur estfalse. Option - track Cette option, lorsqu'elle est définie sur true , l'info-bulle suit / suit la souris. Par défaut, sa valeur estfalse. Syntax `$(".selector").tooltip( { track: true } );`

La section suivante vous montrera quelques exemples fonctionnels de fonctionnalité d'info-bulle.

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité d'info-bulle ne transmettant aucun paramètre au tooltip() méthode.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML tooltipexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Dans l'exemple ci-dessus, passez la souris sur les liens ci-dessus ou utilisez la touche de tabulation pour faire défiler le focus sur chaque élément.

Utilisation du contenu, suivi et désactivée

L'exemple suivant montre l'utilisation de trois options importantes (a) content (b) track et (c) disabled dans la fonction d'info-bulle de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

Dans l'exemple ci-dessus, le contenu de l'info-bulle de la première boîte est défini à l'aide de l' option de contenu . Vous pouvez également remarquer que l'info-bulle suit la souris. L'info-bulle de la deuxième zone de saisie est désactivée.

Utilisation de la position

L'exemple suivant montre l'utilisation de l'option position dans la fonction d'info-bulle de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>
      
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

Dans l'exemple ci-dessus, la position de l'info-bulle est définie en haut de la zone de saisie.

$ (selector, context) .tooltip ("action", [params]), méthode

La méthode info-bulle (action, paramètres) peut effectuer une action sur les éléments de l'info-bulle, telle que la désactivation de l'info-bulle. leaction est spécifié sous forme de chaîne dans le premier argument et éventuellement, un ou plusieurs params peut être fourni en fonction de l'action donnée.

En gros, ici les actions ne sont rien mais ce sont des méthodes jQuery que nous pouvons utiliser sous forme de chaîne.

Syntaxe

$(selector, context).tooltip ("action", [params]);

Le tableau suivant répertorie les actions pour cette méthode -

Sr.No.	Action et description
1	Fermer() Cette action ferme l'info-bulle. Cette méthode n'accepte aucun argument. Action - close() Cette action ferme l'info-bulle. Cette méthode n'accepte aucun argument. Syntax `$(".selector").tooltip("close");`
2	détruire() Cette action supprime complètement la fonctionnalité d'info-bulle. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument. Action - destroy() Cette action supprime complètement la fonctionnalité d'info-bulle. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument. Syntax `$(".selector").tooltip("destroy");`
3	désactiver () Cette action désactive l'info-bulle. Cette méthode n'accepte aucun argument. Action - disable() Cette action désactive l'info-bulle. Cette méthode n'accepte aucun argument. Syntax `$(".selector").tooltip("disable");`
4	activer() Cette action active l'info-bulle. Cette méthode n'accepte aucun argument. Action - enable() Cette action active l'info-bulle. Cette méthode n'accepte aucun argument. Syntax `$(".selector").tooltip("enable");`
5	ouvert() Cette action ouvre l'info-bulle par programme. Cette méthode n'accepte aucun argument. Action - open() Cette action ouvre l'info-bulle par programme. Cette méthode n'accepte aucun argument. Syntax `$(".selector").tooltip("open");`
6	option (optionName) Cette action obtient la valeur associée à optionName pour l'info-bulle. Cette méthode n'accepte aucun argument. Action - option( optionName ) Cette action obtient la valeur associée à optionName pour l'info-bulle. Cette méthode n'accepte aucun argument. Syntax `var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );`
sept	option() Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de l'info-bulle. Cette méthode n'accepte aucun argument. Action - option() Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de l'info-bulle. Cette méthode n'accepte aucun argument. Syntax `$(".selector").tooltip("option");`
8	option (optionName, valeur) Cette action définit la valeur de l'option associée à l'info - bulle spécifiée optionName . Action - option( optionName, value ) Cette action définit la valeur de l'option associée à l'info - bulle spécifiée optionName . Syntax `$( ".selector" ).tooltip( "option", "disabled", true );`
9	option (options) Cette action définit une ou plusieurs options pour l'info-bulle. Action - option( options ) Cette action définit une ou plusieurs options pour l'info-bulle. Syntax `$( ".selector" ).tooltip( "option", { disabled: true } );`
dix	widget () Cette action renvoie un objet jQuery contenant l'élément d'origine. Cette méthode n'accepte aucun argument. Action - widget() Cette action renvoie un objet jQuery contenant l'élément d'origine. Cette méthode n'accepte aucun argument. Syntax `$(".selector").tooltip("widget");`

Exemples

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation des actions désactiver et activer .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
               //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML tooltipexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Dans l'exemple ci-dessus, cliquez sur le bouton myBtn et une info-bulle apparaît.

Gestion des événements sur les éléments de l'info-bulle

En plus de la méthode d'info-bulle (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui sont déclenchées pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -

Sr.No.	Méthode d'événement et description
1	create (événement, interface utilisateur) Déclenché lors de la création de l'info-bulle. Où event est de type Event et ui est de type Object . Event - create(event, ui) Déclenché lors de la création de l'info-bulle. Où event est de type Event et ui est de type Object . Syntax `$(".selector").tooltip( create: function(event, ui) {} );`
2	close (événement, interface utilisateur) Déclenché lorsque l'info-bulle est fermée. Se déclenche généralement lors de la mise au point ou de la sortie de la souris . Où event est de type Event et ui est de type Object . Event - close(event, ui) Déclenché lorsque l'info-bulle est fermée. Se déclenche généralement lors de la mise au point ou de la sortie de la souris . Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - tooltip - Un élément d'info-bulle généré. Syntax `$(".selector").tooltip( close: function(event, ui) {} );`
3	open (événement, interface utilisateur) Déclenché lorsque l'info-bulle est affichée ou affichée. Habituellement déclenché lors de la mise au point ou du survol de la souris . Où event est de type Event et ui est de type Object . Event - open(event, ui) Déclenché lorsque l'info-bulle est affichée ou affichée. Habituellement déclenché lors de la mise au point ou du survol de la souris . Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - tooltip - Un élément d'info-bulle généré. Syntax `$(".selector").tooltip( open: function(event, ui) {} );`

Exemples

L'exemple suivant illustre l'utilisation de la méthode d'événement pendant la fonctionnalité d'info-bulle. Cet exemple illustre l'utilisation d' événements d' ouverture et de fermeture .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown", // show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to TutorialsPoint…',
               show: "fold", 
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML tooltipexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Dans l'exemple ci-dessus, l'info-bulle pour survoler moi! disparaissent immédiatement alors que l'info-bulle pour survoler moi aussi! disparaît après une durée de 1000 ms.