Over a million developers have joined DZone.

ExtJS Customized QuickTip Example

DZone's Guide to

ExtJS Customized QuickTip Example

· Java Zone ·
Free Resource

Java-based (JDBC) data connectivity to SaaS, NoSQL, and Big Data. Download Now.

ExtJS comes with a singleton class Ext.QuickTips (alternate name: Ext.tip.QuickTipManager) which provides attractive and customizable tooltips for any element. The QuickTips singleton is used to configure and manage tooltips globally for multiple elements in a generic manner.

Today I am going to demonstrate how we can use this QuickTips to create a customized instruction text which will help our user to enter valid form data in form text field.

To demonstrate this, I am creating a simple login form and n this form we will place a instruction text with image (displayfield component of Ext library), on click or hover of that image we will display a customized Ext.QuickTip with field validation instructions.

Ext.onReady(function () {

  var qTip = "<p style='color:blue;font-weight:bold;'>Follow the below instruction to enter valid username</p><dl><dt><b style='color:red;'>Lenght:</b></dt><dd>- Minimum: 4 char</dd><dd>- Maximun: 12 char</dd><dt><b style='color:red;'>Character:</b></dt><dd>- Atleast one numeric char</dd><dd>- Special char not allowed</dd>";

  Ext.create('Ext.form.Panel', {
    width: 400,
    frame: true,
    title: 'Login Form - TechZoo',
    padding: 10,
    fieldDefaults: {
      msgTarget: 'side',
      labelWidth: 75
    defaultType: 'textfield',
    defaults: {
      anchor: '98%'
    items: [{
      xtype: 'displayfield',
      value: '<p>Please make sure you follows all the form validation instruction to successfully submit the form.<img id= "questionQTip" src="images/question_white.png" /></p>',

      afterRender: function() {
        var me = this;
          function(e,t) {e.stopEvent();},
      listeners: {
        afterrender: function(me, e){
            dismissDelay: 5000,
            target: 'questionQTip',
            text  : qTip,
            cls   : 'qBodyStyle',
            width : 200
          Ext.get('questionQTip').dom.style.cursor = 'help';
      fieldLabel: 'First Name',
      name: 'first',
      allowBlank: false
      fieldLabel: 'Last Name',
      name: 'last',
      allowBlank: false
    dockedItems: [{
      xtype: 'toolbar',
      dock: 'bottom',
      ui: 'footer',
      items: [{
        xtype: 'tbfill'
        text: 'Cancel'
        text: 'Submit Form'
    renderTo: 'output'

Click of mouseover to question image and you will see following output.


Download Source

Connect any Java based application to your SaaS data.  Over 100+ Java-based data source connectors.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}