Renderer Tooltip

Desplegar información extra en algunos elementos en pantalla a veces ayuda a mejorar la usabilidad de nuestras interfaces. Los tooltips se han vuelto un método común de aplicación. Con este ejemplo demostramos que también es posible modificar sus colores y diseño para contribuir a la facilidad de identificar estas minialertas.

Creado el Domingo 26 de mayo, 2013

Vista previa Descargar

Compartelo:
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",
          '',
          '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: 'juanperez@extjs.mx'
    };

    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",
              '',
              'Nombre: {name} ',
              'Edad: {edad} ',
              'E-mail: {email} '
         ),
         data:data,
         bodyStyle: {
              fontSize: '15px',
              fontWeight: 'bold',
              fontFamily: 'helvetica,arial,verdana,sans-serif',
              color:'white'
         }
    });
})