Diferencia entre revisiones de «Tooltip de ayuda para un componente en Liferay»
(Página creada con '== Introducción == Para empezar, es correcto aclarar que el tooltip de ayuda no es un componente con estructura y template. Este componente tiene solo una estructura y el rend…') |
|||
| Línea 1: | Línea 1: | ||
== Introducción == | == Introducción == | ||
| − | Para empezar, es correcto aclarar que el tooltip de ayuda no es un componente con estructura y template. Este componente tiene solo una estructura y el renderizado | + | A continuación se explicará como realizar un tooltip de ayuda para [[Liferay Portal]]. |
| − | queda a manos del componente que lo utiliza. | + | Para empezar, es correcto aclarar que el tooltip de ayuda no es un componente con estructura y template. Este componente tiene solo una estructura y el renderizado queda a manos del componente que lo utiliza. |
| − | Su funcionalidad principal es mostrar un tooltip de ayuda y | + | Su funcionalidad principal es mostrar un tooltip de ayuda y con contenido personalizable. |
Tiene soporte para IE7+/Firefox/Chrome/Safari. | Tiene soporte para IE7+/Firefox/Chrome/Safari. | ||
| Línea 9: | Línea 9: | ||
== Implementación == | == Implementación == | ||
| − | Como mencioné anteriormente, el tooltip de ayuda solo cuenta con una estructura. En la | + | Como mencioné anteriormente, el tooltip de ayuda solo cuenta con una estructura. En la implementación elegida, la misma está compuesta por un solo campo de texto enriquecido que será el que contiene la información del tooltip. |
| − | enriquecido que será el que contiene la información del tooltip. | + | El componente que quiera utilizar dicho tooltip tiene que heredar la estructura del tooltip de ayuda y además tiene que cambiar su forma de renderizarse adicionando un div donde guarde la informacion del campo de texto enriquecido. |
| − | El componente que quiera utilizar dicho tooltip tiene que heredar la estructura del tooltip de ayuda y además tiene que cambiar su forma de renderizarse adicionando un | + | Por último, para convertir en un tooltip al div anterior, utilizamos una libreria js llamada [http://qtip2.com/ qtip2]. La misma nos permite de una forma muy facil crear un tooltip altamente personalizable. |
| − | div donde guarde la informacion del campo de texto enriquecido. | + | Como particularidad del estilado con lo único que nos encontramos es que para IE7 y IE8 no es soportado el estilo display: inline-block. La solucion es agregar los siguientes estilos: |
| − | Por último, para convertir en un tooltip al div anterior, utilizamos una libreria js llamada qtip2. La misma nos permite de una forma muy facil crear un tooltip | ||
| − | altamente personalizable. | ||
| − | Como particularidad del estilado con lo único que nos encontramos es que para IE7 y IE8 no es soportado el estilo display: inline-block. La solucion es agregar | ||
| − | los siguientes estilos: | ||
div{ | div{ | ||
| Línea 24: | Línea 20: | ||
== Conclusión == | == Conclusión == | ||
| − | El tooltip de ayuda nos provee una funcionalidad que otro componente puede utilizar. Esta separación de tooltip de ayuda y componente nos permite una gran reutilizacion | + | El tooltip de ayuda nos provee una funcionalidad que otro componente puede utilizar. Esta separación de tooltip de ayuda y componente nos permite una gran reutilizacion de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes. |
| − | de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes. | ||
Revisión del 14:47 2 ago 2013
Introducción
A continuación se explicará como realizar un tooltip de ayuda para Liferay Portal. Para empezar, es correcto aclarar que el tooltip de ayuda no es un componente con estructura y template. Este componente tiene solo una estructura y el renderizado queda a manos del componente que lo utiliza. Su funcionalidad principal es mostrar un tooltip de ayuda y con contenido personalizable. Tiene soporte para IE7+/Firefox/Chrome/Safari.
Implementación
Como mencioné anteriormente, el tooltip de ayuda solo cuenta con una estructura. En la implementación elegida, la misma está compuesta por un solo campo de texto enriquecido que será el que contiene la información del tooltip. El componente que quiera utilizar dicho tooltip tiene que heredar la estructura del tooltip de ayuda y además tiene que cambiar su forma de renderizarse adicionando un div donde guarde la informacion del campo de texto enriquecido. Por último, para convertir en un tooltip al div anterior, utilizamos una libreria js llamada qtip2. La misma nos permite de una forma muy facil crear un tooltip altamente personalizable. Como particularidad del estilado con lo único que nos encontramos es que para IE7 y IE8 no es soportado el estilo display: inline-block. La solucion es agregar los siguientes estilos:
div{
display: inline-block; zoom: 1; *display: inline
}
Conclusión
El tooltip de ayuda nos provee una funcionalidad que otro componente puede utilizar. Esta separación de tooltip de ayuda y componente nos permite una gran reutilizacion de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes.
