|
|
Ext.tip Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
QuickTip
|
A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
Ext.tip.QuickTipManager instance. See the QuickTipManager class header for additional usage details and examples.
|
|
|
QuickTipConfig
|
|
|
|
QuickTipEvents
|
|
|
|
QuickTipManager
|
Provides attractive and customizable tooltips for any element. The QuickTips
singleton is used to configure and manage tooltips globally for multiple elements
in a generic manner. To create individual tooltips with maximum customizability,
you should consider either Ext.tip.Tip or Ext.tip.ToolTip. Quicktips can be configured via tag attributes directly in markup, or by
registering quick tips programmatically via the register method. The singleton's instance of Ext.tip.QuickTip is available via
getQuickTip, and supports all the methods, and all the all the
configuration properties of Ext.tip.QuickTip. These settings will apply to all
tooltips shown by the singleton. Below is the summary of the configuration properties which can be used.
For detailed descriptions see the config options for the QuickTip class QuickTips singleton configs (all are optional) dismissDelay hideDelay maxWidth minWidth showDelay trackMouse Target element configs (optional unless otherwise noted) autoHide cls dismissDelay (overrides singleton value) target (required) text (required) title width Here is an example showing how some of these config options could be used: Code // Init the singleton. Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();
// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
maxWidth: 200,
minWidth: 100,
showDelay: 50 // Show 50ms after entering target
});
// Create a small panel to add a quick tip to
Ext.create('Ext.container.Container', {
id: 'quickTipContainer',
width: 200,
height: 150,
style: {
backgroundColor:'#000000'
},
renderTo: Ext.getBody()
});
// Manually register a quick tip for a specific element
Ext.tip.QuickTipManager.register({
target: 'quickTipContainer',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 10000 // Hide after 10 seconds hover
});
To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
the data- namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary
of supported attributes (optional unless otherwise noted): hide: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the same as autoHide = true. qclass: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config). qtip (required): The quick tip text (equivalent to the 'text' target element config). qtitle: The quick tip title (equivalent to the 'title' target element config). qwidth: The quick tip width (equivalent to the 'width' target element config). Here is an example of configuring an HTML element to display a tooltip from markup: // Add a quick tip to an HTML button
<input type="button" value="OK" data-qtitle="OK Button" data-qwidth="100"
data-qtip="This is a quick tip from markup!"></input>
|
|
|
QuickTipManagerConfig
|
|
|
|
QuickTipManagerEvents
|
|
|
|
Tip
|
This is the base class for Ext.tip.QuickTip and Ext.tip.ToolTip that provides the basic layout and
positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
tips that are displayed programmatically, or it can be extended to provide custom tip implementations.
|
|
|
TipConfig
|
|
|
|
TipEvents
|
|
|
|
ToolTip
|
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. Basic Example var tip = Ext.create('Ext.tip.ToolTip', {
target: 'clearButton',
html: 'Press this button to clear the form'
});
Delegation 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()
});
grid.getView().on('render', function(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate 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') + '"');
}
}
});
});
Alignment The following configuration properties allow control over how the ToolTip is aligned relative to
the target element and/or mouse pointer: anchor anchorToTarget anchorOffset trackMouse mouseOffset Showing/Hiding The following configuration properties allow control over how and when the ToolTip is automatically
shown and hidden: autoHide showDelay hideDelay dismissDelay
|
|
|
ToolTipConfig
|
|
|
|
ToolTipEvents
|
|
|
SharpKit.AspNetAjax
Ext