http://codigo.extjs.mx/extjs4/qtips/rendertooltip/rendertooltip.rar

En el siguiente ejemplo aplicaremos un estilo a un tooltip en el cual podremos cambiar el color de fondo y texto, además de que usaremos un componente Ext.XTemplate, para personalizar el tooltip con datos como nombre, e-mail y foto de un usuario. Primero definimos la clase css que nos permite ponerle un fondo de color al tooltip.

.x-btn-green {
     border-color: #A7C942;
     background-image: none;
     background-color: #A7C942;
}

Definimos también el tooltip asignando un target que apuntara al elemento que mostrara al mismo.

Ext.create('Ext.tip.ToolTip',{
     target: 'persona',
     title:'Datos Personales',
     cls:'x-btn-green',
     trackMouse: true,
     tpl: Ext.create("Ext.XTemplate",
          '<img alt="" src="{foto}" width="60" height="60" align="left" />',
          'Nombre: {name} ',
          'Edad: {edad} ',
          'E-mail: {email} '
     ),
     data:data,
     bodyStyle: {
          fontSize: '15px',
          fontWeight: 'bold',
          fontFamily: 'helvetica,arial,verdana,sans-serif',
          color:'white'
     }
});

• target: apunta a persona, que es el id de un botón.
• cls: es la clase css definida anteriormente.
• trackMouse: el tooltip se mueve siguiendo al cursor.
• tpl: asignamos el elemento XTemplate.
• data: es un objeto el cual contiene los datos para el template.
• bodyStyle: también podemos asignar un estilo para el texto.
Ahora veamos el ejemplo completo:

Ext.onReady(function() {
    Ext.QuickTips.init();
    var data = {
        name: 'Juan Pérez Sánchez',
        foto: '../shared/icons/male.png',
        edad: '25 años',
        email: '[email protected]'
    };

    Ext.create("Ext.container.Viewport",{
        renderTo: Ext.getBody(),
        layout:'fit',
        scope:this,
        items:[{
            xtype: 'container',
            layout: {
                type: 'table',
                columns: 1,
                tdAttrs: { style: 'padding: 5px 10px;' }
            },
            items: [{
                xtype: 'button',
                id:'persona',
                text: 'Perfil Usuario',
                scale: 'large',
                cls:'x-btn-default-large x-btn-blue'
            }]
        }]
    })

    Ext.create('Ext.tip.ToolTip',{
         target: 'persona',
         title:'Datos Personales',
         cls:'x-btn-green',
         trackMouse: true,
         tpl: Ext.create("Ext.XTemplate",
              '<img alt="" src="{foto}" width="60" height="60" align="left" />',
              'Nombre: {name} ',
              'Edad: {edad} ',
              'E-mail: {email} '
         ),
         data:data,
         bodyStyle: {
              fontSize: '15px',
              fontWeight: 'bold',
              fontFamily: 'helvetica,arial,verdana,sans-serif',
              color:'white'
         }
    });
})

---