EasyUI
Tooltip
Override defaults with $.fn.tooltip.defaults.
When a user move the mouse pointer over an element, a tooltip message window appears to display additional information. The tooltip content can contain any html elements that come from the page or via ajax.
![](images/tooltip.png)
Usage Example
Create Tooltip
1. Create tooltip from markup, add 'easyui-tooltip' class to the element, no javascript code is needed.
2. Create tooltip using javascript.
Properties
Name | Type | Description | Default |
---|---|---|---|
position | string | The tooltip position. Possible values are: 'left','right','top','bottom'. | bottom |
content | string,function |
The tooltip content. It can be a function that returns the content directly.
Code examples: $('#tt').tooltip({ content: 'This is the tooltip message.' }); $('#tt').tooltip({ content: function(){ return '<div>...</div>'; } }); |
null |
trackMouse | boolean | True to make tooltip move along with the mouse. | false |
deltaX | number | The horizontal distance from the tooltip position. | 0 |
deltaY | number | The vertical distance from the tooltip position. | 0 |
showEvent | string | The event that cause the tooltip to appear. | mouseenter |
hideEvent | string | The event that cause the tooltip to disappear. | mouseleave |
showDelay | number | The time delay to show tooltip. | 200 |
hideDelay | number | The time delay to hide tooltip. | 100 |
Events
Name | Parameters | Description |
---|---|---|
onShow | e | Fires when show tooltip. |
onHide | e | Fires when hide tooltip. |
onUpdate | content | Fires when tooltip content is updated. |
onPosition | left,top | Fires when tooltip position is changed. |
onDestroy | none | Fires when tooltip is destroyed. |
Methods
Name | Parameter | Description |
---|---|---|
options | none | Return the options property. |
tip | none | Return the tip object. |
arrow | none | Return the arrow object. |
show | e | Display the tooltip. |
hide | e | Hide the tooltip. |
update | content | Update the tooltip content. |
reposition | none | Reset the tooltip position. |
destroy | none | Destroy the tooltip. |