extjs/examples/classic/qtips/qtips.js

   1 Ext.require([
   2     'Ext.tip.*',
   3     'Ext.Button',
   4     'Ext.window.MessageBox'
   5 ]);
   6
   7 Ext.onReady(function() {
   8     // Generate the buttons
   9     var defaultButtonConfig = {
  10         scale: 'medium',
  11         style: {
  12             "margin-right": '10px'
  13         }
  14     };
  15
  16     var buttons = [{
  17             id      : 'tip1',
  18             text    : 'Basic ToolTip',
  19             renderTo: 'easiest'
  20         },{
  21             id      : 'tip2',
  22             text    : 'autoHide disabled',
  23             renderTo: 'easiest'
  24         },{
  25             id      : 'ajax-tip',
  26             text    : 'Ajax ToolTip',
  27             renderTo: 'easiest'
  28         },{
  29             id      : 'track-tip',
  30             text    : 'Mouse Track',
  31             renderTo: 'easiest'
  32         },{
  33             id      : 'leftCallout',
  34             text    : 'Anchor right, rich content',
  35             renderTo: 'anchor'
  36         },{
  37             id      : 'bottomCallout',
  38             text    : 'Anchor below',
  39             width   : 200,
  40             renderTo: 'anchor'
  41         },{
  42             id      : 'trackCallout',
  43             text    : 'Anchor with tracking',
  44             renderTo: 'anchor'
  45     }];
  46
  47     Ext.each(buttons, function(config) {
  48         var btn = Ext.create('Ext.Button', Ext.apply({}, config, defaultButtonConfig));
  49     });
  50
  51     var tooltips = [{
  52             target: 'tip1',
  53             html: 'A very simple tooltip'
  54         },{
  55             target: 'ajax-tip',
  56             width: 200,
  57             loader: {
  58                 url: 'ajax-tip.html',
  59                 loadOnRender: true
  60             },
  61             dismissDelay: 15000 // auto hide after 15 seconds
  62         },{
  63             target: 'tip2',
  64             title: 'My Tip Title',
  65             html: 'Click the X to close me',
  66             autoHide : false,
  67             closable : true,
  68             draggable: true
  69         },{
  70             target: 'track-tip',
  71             title: 'Mouse Track',
  72             width: 200,
  73             html: 'This tip will follow the mouse while it is over the element',
  74             trackMouse: true
  75         },{
  76             title: '<a href="#">Rich Content Tooltip</a>',
  77             id: 'content-anchor-tip',
  78             target: 'leftCallout',
  79             anchor: 'left',
  80             html: null,
  81             width: 415,
  82             autoHide: false,
  83             closable: true,
  84             contentEl: 'content-tip', // load content from the page
  85             listeners: {
  86                 'render': function(){
  87                     this.header.on('click', function(header, e){
  88                         e.stopEvent();
  89                         Ext.Msg.alert('Link', 'Link to something interesting.');
  90                         Ext.getCmp('content-anchor-tip').hide();
  91                     }, this, {delegate:'a'});
  92                 }
  93             }
  94         },{
  95             target: 'bottomCallout',
  96             anchor: 'top',
  97             anchorOffset: 85, // center the anchor on the tooltip
  98             html: 'This tip\'s anchor is centered'
  99         },{
 100             target: 'trackCallout',
 101             anchor: 'right',
 102             trackMouse: true,
 103             html: 'Tracking while you move the mouse'
 104     }];
 105
 106     Ext.each(tooltips, function(config) {
 107         Ext.create('Ext.tip.ToolTip', config);
 108     });
 109
 110     Ext.QuickTips.init();
 111 });