MooTools - Info-bulles

MooTools fournit différentes info-bulles pour concevoir des styles et des effets personnalisés. Dans ce chapitre, nous allons découvrir les différentes options et événements des info-bulles, ainsi que quelques outils qui vous aideront à ajouter ou supprimer des info-bulles d'éléments.

Créer une nouvelle info-bulle

La création d'une info-bulle est très simple. Tout d'abord, nous devons créer l'élément où nous allons attacher l'info-bulle. Prenons un exemple qui crée une balise d'ancrage et l'ajoute à la classe Tips dans le constructeur. Jetez un œil au code suivant.

<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" 
   rel = "here is the default 'text' for toll tip demo" 
   href = "http://www.tutorialspoint.com">Tool tip _demo</a>

Jetez un œil au code utilisé pour créer une info-bulle.

var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);

Exemple

L'exemple suivant explique l'idée de base des info-bulles. Jetez un œil au code suivant.

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var customTips = $$('.tooltip_demo');
            var toolTips = new Tips(customTips);
         });
      </script>
   </head>
   
   <body>
      <a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" 
         rel = "here is the default 'text' for toll tip demo" 
         href = "http://www.tutorialspoint.com">Tool tip _demo</a>
   </body>
   
</html>

Vous recevrez la sortie suivante -

Production

Options d'info-bulle

Il n'y a que cinq options dans Astuces et elles sont toutes assez explicites.

showDelay

Un entier mesuré en millisecondes, cela déterminera le délai avant que l'info-bulle ne s'affiche une fois la souris de l'utilisateur sur l'élément. La valeur par défaut est fixée à 100.

hideDelay

Tout comme showDelay ci-dessus, cet entier (également mesuré en millisecondes) détermine combien de temps attendre avant de masquer le conseil une fois que l'utilisateur quitte l'élément. La valeur par défaut est fixée à 100.

nom du cours

Cela vous permet de définir un nom de classe pour l'habillage de l'infobulle. La valeur par défaut est définie sur Null.

Décalage

Cela détermine à quelle distance de l'élément l'info-bulle apparaîtra. «x» fait référence au décalage de droite, où «y» est le décalage vers le bas (tous deux relatifs au curseur SI l'option «fixed» est définie sur false, sinon le décalage est relatif à l'élément d'origine). La valeur par défaut est x: 16, y: 16

Fixé

Cela définit si l'info-bulle suivra ou non votre souris si vous vous déplacez autour de l'élément. Si vous le définissez sur true, l'info-bulle ne bougera pas lorsque vous déplacez votre curseur, mais restera fixe par rapport à l'élément d'origine. La valeur par défaut est false.

Événements d'info-bulle

Les événements d'info-bulle restent simples, comme le reste de cette classe. Il y a deux événements - onShow et onHide, et ils fonctionnent comme prévu.

onShow ()

Cet événement s'exécute lorsque l'info-bulle apparaît. Si vous définissez un délai, cet événement ne s'exécutera pas tant que le délai ne sera pas écoulé.

onHide ()

L'info-bulle se masque lors de l'exécution de cet événement. S'il y a un délai, cet événement ne s'exécutera pas tant que le délai ne sera pas écoulé.

Méthodes des info-bulles

Il existe deux méthodes pour les info-bulles: attacher et détacher. Cela vous permet de cibler un élément spécifique et de l'ajouter à un objet d'info-bulle (et par conséquent, inhérent à tous les paramètres de cette instance de classe) ou de détacher un élément particulier.

attacher()

Pour attacher un nouvel élément à un objet info-bulle, indiquez simplement l'objet info-bulle, le point d'accrochage sur .attach ();, et placez enfin le sélecteur d'élément entre crochets ().

Syntax

toolTips.attach('#tooltipID3');

dettach ()

Cette méthode fonctionne exactement comme la méthode .attach, mais le résultat est complètement le contraire. Tout d'abord, indiquez l'objet tip, puis ajoutez .dettach (), et enfin placez votre sélecteur d'élément dans ().