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.
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. |