examples/simple-widgets/qtips.js

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