Plugin de base jQuery EasyUI -Info-bulle

jQuery EasyUI 插件Plugins jQuery EasyUI

Remplace les valeurs par défaut via $.fn.tooltip.defaults.

Lorsque l'utilisateur déplace le pointeur de la souris sur un élément, une fenêtre d'info-bulle apparaît pour afficher des informations supplémentaires. Le contenu de l'info-bulle peut contenir n'importe quel élément HTML de la page ou généré via ajax.

Utilisation

Créer une info-bulle

1. Créez une info-bulle à partir du balisage, ajoutez la classe 'easyui-tooltip' à l'élément, aucun code JavaScript n'est requis.

<a href="../index.html" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

2. Créez une info-bulle à l'aide de JavaScript.

<a id="dd" href="#">Click here</a>

$('#dd').tooltip({
    position: 'right',
    content: '<span style="color:#fff">This is the tooltip message.</span>',
    onShow: function(){
        $(this).tooltip('tip').css({
            backgroundColor: '#666',
            borderColor: '#666'
        });
    }
});

Propriétés

Name Type Description Valeur par défaut
position string Position de l'info-bulle. Valeurs possibles : 'left', 'right', 'top', 'bottom'. bottom
content string Contenu de l'info-bulle. null
trackMouse booléen Si défini sur true, l'info-bulle se déplace avec la souris. false
deltaX nombre Distance horizontale de la position de l'info-bulle. 0
deltaY nombre Distance verticale de la position de l'info-bulle. 0
showEvent string Événement qui déclenche l'apparition de l'info-bulle. mouseenter
hideEvent string Événement qui déclenche la disparition de l'infobulle. mouseleave
showDelay nombre Délai pour afficher l'infobulle. 200
hideDelay nombre Délai pour masquer l'infobulle. 100

Événements

Name Parameters Description
onShow e Déclenché lorsque l'infobulle est affichée.
onHide e Déclenché lorsque l'infobulle est masquée.
onUpdate content Déclenché lorsque le contenu de l'infobulle est mis à jour.
onPosition left,top Déclenché lorsque la position de l'infobulle change.
onDestroy none Déclenché lorsque l'infobulle est détruite.

Méthodes

Name Parameters Description
options none Renvoie la propriété options.
tip none Retourne l'objet tip.
arrow none Retourne l'objet arrow.
show e Afficher l'infobulle.
hide e Masquer l'infobulle.
update content Mettre à jour le contenu de l'infobulle.
repositionner none Réinitialiser la position de l'infobulle.
destroy none Détruire l'infobulle.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions