examples/simple-widgets/qtips.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8     new Ext.ToolTip({
   9         target: 'tip1',
  10         html: 'A very simple tooltip'
  11     });
  12
  13     new Ext.ToolTip({
  14         target: 'ajax-tip',
  15         width: 200,
  16         autoLoad: {url: 'ajax-tip.html'},
  17         dismissDelay: 15000 // auto hide after 15 seconds
  18     });
  19
  20     new Ext.ToolTip({
  21         target: 'tip2',
  22         html: 'Click the X to close me',
  23         title: 'My Tip Title',
  24         autoHide: false,
  25         closable: true,
  26         draggable:true
  27     });
  28
  29     new Ext.ToolTip({
  30         target: 'track-tip',
  31         title: 'Mouse Track',
  32         width:200,
  33         html: 'This tip will follow the mouse while it is over the element',
  34         trackMouse:true
  35     });
  36
  37     new Ext.ToolTip({
  38         title: '<a href="#">Rich Content Tooltip</a>',
  39         id: 'content-anchor-tip',
  40         target: 'leftCallout',
  41         anchor: 'left',
  42         html: null,
  43         width: 415,
  44         autoHide: false,
  45         closable: true,
  46         contentEl: 'content-tip', // load content from the page
  47         listeners: {
  48             'render': function(){
  49                 this.header.on('click', function(e){
  50                     e.stopEvent();
  51                     Ext.Msg.alert('Link', 'Link to something interesting.');
  52                     Ext.getCmp('content-anchor-tip').hide();
  53                 }, this, {delegate:'a'});
  54             }
  55         }
  56     });
  57
  58     new Ext.ToolTip({
  59         target: 'bottomCallout',
  60         anchor: 'top',
  61         anchorOffset: 85, // center the anchor on the tooltip
  62         html: 'This tip\'s anchor is centered'
  63     });
  64
  65     new Ext.ToolTip({
  66         target: 'trackCallout',
  67         anchor: 'right',
  68         trackMouse: true,
  69         html: 'Tracking while you move the mouse'
  70     });
  71
  72
  73     Ext.QuickTips.init();
  74
  75 });