Clear Up
SharpKit Reference

ToolTip Class

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'


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('', {
            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 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:

  • anchor
  • anchorToTarget
  • anchorOffset
  • trackMouse
  • mouseOffset


The following configuration properties allow control over how and when the ToolTip is automatically shown and hidden:

  • autoHide
  • showDelay
  • hideDelay
  • dismissDelay

Namespace: Ext.tip

Derived Types



Name Description
anchor If specified, indicates that the tip should be anchored to a particular side of the target element or mouse pointer ("top", "right", "bottom", or "left"), with an arrow pointing back at the target or mouse pointer. If constrainPosition is enabled, this will be used as a preferred value only and may be flipped as needed.
anchorOffset A numeric pixel value used to offset the default position of the anchor arrow. When the anchor position is on the top or bottom of the tooltip, anchorOffset will be used as a horizontal offset. Likewise, when the anchor position is on the left or right side, anchorOffset will be used as a vertical offset. Defaults to: 0
anchorToTarget True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates. When anchorToTarget is true, use defaultAlign to control tooltip alignment to the target element. When anchorToTarget is false, use anchor instead to control alignment. Defaults to: true
autoHide True to automatically hide the tooltip after the mouse exits the target element or after the dismissDelay has expired if set. If closable = true a close tool button will be rendered into the tooltip header. Defaults to: true
delegate A DomQuery selector which allows selection of individual elements within the target element to trigger showing and hiding the ToolTip as the mouse moves within the target. When specified, the child element of the target which caused a show event is placed into the triggerElement property before the ToolTip is shown. This may be useful when a Component has regular, repeating elements in it, each of which need a ToolTip which contains information specific to that element. See the delegate example in class documentation of Ext.tip.ToolTip.
dismissDelay Delay in milliseconds before the tooltip automatically hides. To disable automatic hiding, set dismissDelay = 0. Defaults to: 5000
hideDelay Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides. Set to 0 for the tooltip to hide immediately. Defaults to: 200
mouseOffset An XY offset from the mouse position where the tooltip should be shown. Defaults to: [15, 18]
showDelay Delay in milliseconds before the tooltip displays after the mouse enters the target element. Defaults to: 500
target The target element or string id to monitor for mouseover events to trigger showing this ToolTip.
trackMouse True to have the tooltip follow the mouse as it moves over the target element. Defaults to: false


Name Description
hide() Hides this tooltip if visible. Overrides: Ext.Component.hide
setTarget(object) Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
show() Shows this tooltip at the current event target XY position. Overrides:


Name Description
triggerElement When a ToolTip is configured with the delegate option to cause selected child elements of the target Element to each trigger a separate show event, this property is set to the DOM element which triggered the show.
© Copyright 2005-2011 SharpKit. All rights reserved.