Set message target to use tooltip

  


<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
Ext.QuickTips.init();

var formPanelItems =[

   {
      fieldLabel    : 'Special Chars Only',
      allowBlank    : false,
      msgTarget : 'qtip',
      stripCharsRe  : /[a-zA-Z0-9]/ig
   }
];

var fp = new Ext.form.FormPanel({
   renderTo     : Ext.getBody(),
   width        : 400,
   title        : 'Title here',
   height       : 170,
   frame        : true,
   bodyStyle    : 'padding: 5px',
   monitorValid : true,
   monitorPoll  : 50, 
   labelWidth   : 125,   
   defaultType  : 'textfield',
   defaults     : {
      msgTarget : 'side',
      anchor    : '-20'
   },
   items        : formPanelItems,
});



});
</script> 
<div id='div1'>asdf</div>
</body>
</html>

Related examples in the same category

1.	Add tooltip to tab
2.	Basic tooltip
3.	Auto hide tooltip
4.	Closable tooltip
5.	Callout tooltip
6.	Mouse track tooltip
7.	Ajax tooltip
8.	Anchor right tooltip
9.	Slider with tooltip
10.	Slider with custom tooltip
11.	CSS customized tooltip

Set message target to use tooltip : Tooltip « Ext JS « JavaScript DHTML

Related examples in the same category