Cómo mostrar tooltips dentro de componentes List de Flex

Este es un tip muy sencillito que consiste en cómo añadir tooltips a cada uno de los elementos de un componente List en Flex.

Primero de todo supongamos que tenemos un compomente list en nuestra aplicación que nos muestra un listado. En este caso tenemos un listado de usuarios de Clab dentro de un Array registrando el nombre y el clablevel.

Código :

<mx:List id="listado"
   horizontalCenter="0" verticalCenter="0" 
   width="200" height="200">
   
   <mx:dataProvider>
   <mx:Array>
         <mx:Object label="Freddie" level="43458"/>
         <mx:Object label="Elecash" level="7289"/>
         <mx:Object label="_Conejo" level="7203"/>
         <mx:Object label="XKlibur" level="4713"/>
         <mx:Object label="Zguillez" level="4120"/>
         <mx:Object label="Eldervaz" level="3123"/>
         <mx:Object label="Mariux" level="2921"/>
         <mx:Object label="Zah" level="2906"/>
         <mx:Object label="Bleend" level="2016"/>
         <mx:Object label="Carmen Vivas" level="610"/>
      </mx:Array>
   </mx:dataProvider>   
</mx:List>

En este punto el componente List nos muestra los nombres que corresponden al parámetro "label" de los objetos del Array.

Ahora queremos que al pasar el cursor sobre los nombres nos muestre el valor del parámetro "level" a modo de tooltip. Para realizar esto añadiremos el parámetro showDataTips y showDataTips al componente List..

Código :

<mx:List id="listado"
   horizontalCenter="0" 
   verticalCenter="0" 
   width="200" height="200"
   showDataTips="true"
   dataTipFunction="showTip">

La función showTip asignada al parámetro dataTipFunction es la definirá el contenido del tooltip a mostrar según cada objeto del Array.

Código :

<mx:Script>
   <![CDATA[            
      public function showTip(i:Object):String
      {
         return i.level;
      }
   ]]>
</mx:Script>

Este es el resultado:



El inconveniente de este sistema es que el tooltip se situa sobre la misma linea del item al que se le hace rollover. Si no nos interesa esto y queremos que el tooltip quede situado al lado del cursor deberemos utilizar otro sistema, la clase ToolTipManager.

Para utilizar la clase ToolTipManager tendremos que utilizar un itemRenderer que sea el que muestre los elementos del componente List.

Este será nuestro itemRenderer, un simple label:

Código :

<mx:itemRenderer>
   <mx:Component>
      <mx:Label text="{data.label}" toolTip="{data.level}"/>
   </mx:Component>
</mx:itemRenderer>

Aqui directamente definimos el tooltip directamente al Label, visualizándose directamente para todos los elementos del listado. Permitiendonos utilizar todas las caráteristicas que nos permite la clase ToolTipManager. En este caso eliminaremos la función showTip ya que aqui no la estamos utilizando.



Los códigos completos de las dos versiones serían estos:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   
   <mx:Script>
      <![CDATA[         
         public function showTip(i:Object):String
         {
            return i.level;
         }
      ]]>
   </mx:Script>

   <mx:List id="listado"
      horizontalCenter="0" 
      verticalCenter="0" 
      width="200" height="200"
      showDataTips="true"
      dataTipFunction="showTip">
      
      <mx:dataProvider>
         <mx:Array>
            <mx:Object label="Freddie" level="43458"/>
            <mx:Object label="Elecash" level="7289"/>
            <mx:Object label="_Conejo" level="7203"/>
            <mx:Object label="XKlibur" level="4713"/>
            <mx:Object label="Zguillez" level="4120"/>
            <mx:Object label="Eldervaz" level="3123"/>
            <mx:Object label="Mariux" level="2921"/>
            <mx:Object label="Zah" level="2906"/>
            <mx:Object label="Bleend" level="2016"/>
            <mx:Object label="Carmen Vivas" level="610"/>
         </mx:Array>
      </mx:dataProvider>      
   </mx:List>  
</mx:Application>

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

   <mx:List id="listado"
      horizontalCenter="0" 
      verticalCenter="0" 
      width="200" height="200">
      
      <mx:itemRenderer>
         <mx:Component>
            <mx:Label text="{data.label}" toolTip="{data.level}"/>
         </mx:Component>
      </mx:itemRenderer>

      <mx:dataProvider>
         <mx:Array>
            <mx:Object label="Freddie" level="43458"/>
            <mx:Object label="Elecash" level="7289"/>
            <mx:Object label="_Conejo" level="7203"/>
            <mx:Object label="XKlibur" level="4713"/>
            <mx:Object label="Zguillez" level="4120"/>
            <mx:Object label="Eldervaz" level="3123"/>
            <mx:Object label="Mariux" level="2921"/>
            <mx:Object label="Zah" level="2906"/>
            <mx:Object label="Bleend" level="2016"/>
            <mx:Object label="Carmen Vivas" level="610"/>
         </mx:Array>
      </mx:dataProvider>      
   </mx:List>  
</mx:Application>

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.