YouTipPlugins Base Tooltip
# jQuery EasyUI Basic Plugin - Tooltip
* * jQuery EasyUI Plugin](#)
* * *
Override the default defaults via `$.fn.tooltip.defaults`.
When the user moves the mouse pointer over an element, a tooltip message window appears to display additional information. The tooltip content can contain any HTML elements from the page or generated via AJAX.
!(#)
## Usage
#### Creating a Tooltip
1. Create a tooltip from markup by adding the 'easyui-tooltip' class to the element. No JavaScript code is required.
Hover me
2. Create a tooltip using JavaScript.
Click here$('#dd').tooltip({ position: 'right', content: 'This is the tooltip message.', onShow: function(){$(this).tooltip('tip').css({backgroundColor: '#666',borderColor: '#666'}); }});
## Properties
| Name | Type | Description | Default |
| :--- | :--- | :--- | :--- |
| position | string | The tooltip position. Possible values: 'left', 'right', 'top', 'bottom'. | bottom |
| content | string | The tooltip content. | null |
| trackMouse | boolean | If set to true, the tooltip will follow the mouse. | false |
| deltaX | number | The horizontal distance of the tooltip position. | 0 |
| deltaY | number | The vertical distance of the tooltip position. | 0 |
| showEvent | string | The event that triggers the tooltip to appear. | mouseenter |
| hideEvent | string | The event that triggers the tooltip to disappear. | mouseleave |
| showDelay | number | The time delay in milliseconds before showing the tooltip. | 200 |
| hideDelay | number | The time delay in milliseconds before hiding the tooltip. | 100 |
## Events
| Name | Parameters | Description |
| :--- | :--- | :--- |
| onShow | e | Fires when the tooltip is shown. |
| onHide | e | Fires when the tooltip is hidden. |
| onUpdate | content | Fires when the tooltip content is updated. |
| onPosition | left, top | Fires when the tooltip position is changed. |
| onDestroy | none | Fires when the tooltip is destroyed. |
## Methods
| Name | Parameters | Description |
| :--- | :--- | :--- |
| options | none | Returns the options object. |