docs/source/qtips.html

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