module Ext_tip_ToolTip:ToolTip is a Ext.tip.Tip implementation that handl ...sig
..end
ToolTip is a Ext.tip.Tip implementation that handles the common case of displaying a tooltip when hovering over a certain element or elements on the page. It allows fine-grained control over the tooltip's alignment relative to the target element or mouse, and the timing of when it is automatically shown and hidden.
This implementation does not have a built-in method of automatically populating the tooltip's text based on the target element; you must either configure a fixed html value for each ToolTip instance, or implement custom logic (e.g. in a beforeshow event listener) to generate the appropriate tooltip content on the fly. See Ext.tip.QuickTip for a more convenient way of automatically populating and configuring a tooltip based on specific DOM attributes of each target element.
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'clearButton',
html: 'Press this button to clear the form'
});
In addition to attaching a ToolTip to a single element, you can also use delegation to attach one ToolTip to many elements under a common parent. This is more efficient than creating many ToolTip instances. To do this, point the target config to a common ancestor of all the elements, and then set the delegate config to a CSS selector that will select all the appropriate sub-elements.
When using delegation, it is likely that you will want to programmatically change the content of the ToolTip based on each delegate element; you can do this by implementing a custom listener for the beforeshow event. Example:
var store = Ext.create('Ext.data.ArrayStore', {
fields: ['company', 'price', 'change'],
data: [
['3m Co', 71.72, 0.02],
['Alcoa Inc', 29.01, 0.42],
['Altria Group Inc', 83.81, 0.28],
['American Express Company', 52.55, 0.01],
['American International Group, Inc.', 64.13, 0.31],
['AT&T Inc.', 31.61, -0.48]
]
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Array Grid',
store: store,
columns: [
{text: 'Company', flex: 1, dataIndex: 'company'},
{text: 'Price', width: 75, dataIndex: 'price'},
{text: 'Change', width: 75, dataIndex: 'change'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
var view = grid.getView();
var tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own separate show and hide.
delegate: view.itemSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
}
}
});
The following configuration properties allow control over how the ToolTip is aligned relative to the target element and/or mouse pointer:
The following configuration properties allow control over how and when the ToolTip is automatically shown and hidden:
class type t =object
..end
class type configs =object
..end
class type events =object
..end
class type statics =object
..end
val of_configs : configs Js.t -> t Js.t
of_configs c
casts a config object c
to an instance of class t
val to_configs : t Js.t -> configs Js.t
to_configs o
casts instance o
of class t
to a config object