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.