❮ Jeasyui Datagrid Datagrid11 Jeasyui Datagrid Datagrid20 ❯

jQuery EasyUI Basic Plugin - `Tooltip`

Override default defaults with $.fn.tooltip.defaults.

When the user moves the mouse pointer over an element, a tooltip window appears to display additional information. The tooltip content can include any HTML elements from the page or generated via AJAX.

Usage

Creating a Tooltip

Create a tooltip from markup by adding the 'easyui-tooltip' class to the element, without any JavaScript code.
```
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
```

Create a tooltip using JavaScript.

<a id="dd" href="javascript:void(0)">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'
        });
    }
});

Properties

Name	Type	Description	Default
position	string	The position of the tooltip. Possible values: 'left', 'right', 'top', 'bottom'.	bottom
content	string	The content of the tooltip.	null
trackMouse	boolean	If set to true, the tooltip will follow the mouse movement.	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 before the tooltip is displayed.	200
hideDelay	number	The time delay before the tooltip is hidden.	100

Events

Name	Parameters	Description
onShow	e	Triggered when the tooltip is shown.
onHide	e	Triggered when the tooltip is hidden.
onUpdate	content	Triggered when the tooltip content is updated.
onPosition	left, top	Triggered when the tooltip position changes.
onDestroy	none	Triggered when the tooltip is destroyed.

Methods

Name	Parameters	Description
options	none	Returns the options property.
tip	none	Returns the tip object.
arrow	none	Returns the arrow object.
show	e	Displays the tooltip.
hide	e	Hides the tooltip.
update	content	Updates the tooltip content.
reposition	none	Resets the tooltip position.
destroy	none	Destroys the tooltip.