jQuery EasyUI Basis-Plugin -Tooltip

jQuery EasyUI 插件jQuery EasyUI Plugins

Überschreiben Sie die Standardwerte über $.fn.tooltip.defaults.

Wenn der Benutzer den Mauszeiger über ein Element bewegt, erscheint ein Tooltip-Fenster, um zusätzliche Informationen anzuzeigen. Der Inhalt des Tooltips kann ein beliebiges HTML-Element von der Seite enthalten oder per Ajax generiert werden.

Nutzung

Tooltip erstellen

1. Erstellen Sie einen Tooltip aus Markup, fügen Sie die Klasse 'easyui-tooltip' zum Element hinzu, es ist kein JavaScript-Code erforderlich.

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

2. Erstellen Sie einen Tooltip mit 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'
        });
    }
});

Eigenschaften

Name Type Beschreibung Standardwert
position string Position des Tooltips. Mögliche Werte: 'left', 'right', 'top', 'bottom'. bottom
content string Inhalt des Tooltips. null
trackMouse boolesch Wenn auf true gesetzt, bewegt sich der Tooltip mit der Maus. false
deltaX number Horizontaler Abstand der Tooltip-Position. 0
deltaY number Vertikaler Abstand der Tooltip-Position. 0
showEvent string Ereignis, das das Erscheinen des Tooltips auslöst. mouseenter
hideEvent string Ereignis, das bewirkt, dass der Tooltip verschwindet. mouseleave
showDelay number Zeitverzögerung zum Anzeigen des Tooltips. 200
hideDelay number Zeitverzögerung zum Ausblenden des Tooltips. 100

Ereignisse

Name Parameters Beschreibung
onShow e Wird ausgelöst, wenn der Tooltip angezeigt wird.
onHide e Wird ausgelöst, wenn der Tooltip ausgeblendet wird.
onUpdate content Wird ausgelöst, wenn der Tooltip-Inhalt aktualisiert wird.
onPosition left,top Wird ausgelöst, wenn sich die Tooltip-Position ändert.
onDestroy none Wird ausgelöst, wenn der Tooltip zerstört wird.

Methoden

Name Parameters Beschreibung
options none Gibt die Eigenschaft options zurück.
tip none Gibt das tip-Objekt zurück.
arrow none Gibt das arrow-Objekt zurück.
show e Tooltip anzeigen.
hide e Tooltip ausblenden.
update content Aktualisieren Sie den Tooltip-Inhalt.
reposition none Setzen Sie die Tooltip-Position zurück.
destroy none Zerstören Sie den Tooltip.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen