jQuery EasyUI complementos básicos -Tooltip (cuadro de información)

jQuery EasyUI 插件Complementos de jQuery EasyUI

Sobrescriba los defaults mediante $.fn.tooltip.defaults.

Cuando el usuario mueve el puntero del ratón sobre un elemento, aparece una ventana de información (tooltip) para mostrar información adicional. El contenido del tooltip puede incluir cualquier elemento HTML proveniente de la página o generado mediante ajax.

Uso

Crear tooltip

1. Cree un tooltip desde el marcado, agregue la clase 'easyui-tooltip' al elemento, no se necesita ningún código JavaScript.

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

2. Cree un tooltip usando 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'
        });
    }
});

Propiedades

Nombre Tipo Descripción Valor predeterminado
position string Posición del tooltip. Valores posibles: 'left', 'right', 'top', 'bottom'. bottom
content string Contenido del tooltip. null
trackMouse boolean Si se establece en true, el tooltip se moverá con el ratón. false
deltaX number Distancia horizontal de la posición del tooltip. 0
deltaY number Distancia vertical de la posición del tooltip. 0
showEvent string Evento que provoca la aparición del tooltip. mouseenter
hideEvent string Evento que provoca la desaparición del tooltip. mouseleave
showDelay number Retraso de tiempo para mostrar el tooltip. 200
hideDelay number Retraso de tiempo para ocultar el tooltip. 100

Eventos

Nombre Parámetros Descripción
onShow e Se activa cuando se muestra el tooltip.
onHide e Se activa cuando se oculta el tooltip.
onUpdate content Se activa cuando se actualiza el contenido del tooltip.
onPosition left,top Se activa cuando cambia la posición del tooltip.
onDestroy none Se activa cuando se destruye el tooltip.

Métodos

Nombre Parámetros Descripción
options none Devuelve la propiedad options.
tip none Devuelve el objeto tip.
arrow none Devuelve el objeto arrow.
show e Muestra el tooltip.
hide e Oculta el tooltip.
update content Actualiza el contenido del tooltip.
reposition none Restablece la posición del tooltip.
destroy none Destruye el tooltip.
jQuery EasyUI 插件Complementos de jQuery EasyUI Otras extensiones