Tooltips es una herramienta que nos permite ampliar la informacion sobre un determinado texto o una imagen, esta información aparece con la respuesta del evento javascript onmouseover.
Activar el comportamiento Tooltip
Para empezar, debes activar el comportamiento tooltip. Esto se hace con la siguiente línea de código:
JHTML ::_(' behavior.tooltip ');
Ten en cuenta que sólo se pone una línea por vez por archivo. Un buen lugar para agregar este código es debajo de la declaración define( '_JEXEC') or die ( 'Restricted access');.
Si eres curioso acerca de lo que hace esta línea, notaras que se inserta el siguiente código JavaScript en el encabezamiento de la página HTML:
<script type="text/javascript"> window.addEvent('domready', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false}); }); window.addEvent('domready', function(){ $$('dl.tabs').each(function(tabs){ new JTabs(tabs, {}); }); }); window.addEvent('domready', function() { SqueezeBox.initialize({}); $$('a.modal').each(function(el) { el.addEvent('click', function(e) { new Event(e).stop(); SqueezeBox.fromElement(el); }); }); }); </script>
Esto permite utilizar las funciones tooltips, como se indica a continuación.
Creando un texto de ayuda con el método JHTML::tooltip:
Una forma de crear un texto de ayuda es utilizando el método JHTML::tooltip.La documentación de la API está disponible en http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#tooltip.
La definición del método se muestra a continuación:
void tooltip (string $tooltip, [string $title = ''], [string $image = 'tooltip.png'],
[string $text = ''], [string $href = ''], [boolean $link = 1])
Los corchetes significan que el parámetro es opcional. El primer parámetro, "$tooltip" es el único parámetro necesario. El valor por defecto se asigna cuando no se pasa ningún parametro. En este caso por ejemplo el archivo 'tooltip.png', es la imagen por defecto.
La siguiente es una descripción básica. Ten en cuenta que la variable de imagen debe estar dentro de la carpeta 'includes/js/ThemeOffice'. Usa la'../../../' para hacer referencia a la raiz de la instalación de Joomla.
Ejemplo:
echo JHTML::tooltip( 'Esta es la descripción del texto', 'Titulo Tooltip', 'tooltip.png','', 'http://www.joomla.org');
El código anterior hará una descripción usando la imagen 'tooltip.png' como se muestra a continuación.
Al hacer clic en la imagen te llevará al link http://www.joomla.org, ya que es el "$href" del argumento. El código fuente HTML de esta descripción es el siguiente:
span class="editlinktip hasTip" title="Titulo Tooltip::Esta es la descripción del texto" > <a href="http://www.joomla.org"><img src="/my_joomla_path/joomla159/includes/js/ThemeOffice/tooltip.png" border="0" alt="Tooltip"/></a> </span>
Error en el Internet Explorer: Como se ha indicado, cuando se utiliza el método JHTML::tooltip para crear una descripción de la imagen, se crea un atributo "alt" con el valor "tooltip". El atributo "alt" se utiliza en los casos en que el archivo de imagen no puede ser encontrado o para la accesibilidad (por ejemplo, para usuarios ciegos). Internet Explorer de forma automática - y de forma incorrecta - muestra el atributo "alt" como una descripción. Esto significa que la imagen de información sobre herramientas creadas por el método JHTML::tooltip (como el ejemplo anterior) se mostrará con dos tooltips cuando se ve con Internet Explorer, como se muestra a continuación.
Puedes evitar este problema, ya sea con información sobre herramientas de texto o por no utilizar este método para información sobre herramientas de imagen. En su lugar, simplemente introduce el código HTML manualmente y establece el atributo "alt" para una cadena vacía (alt ="").
Este código es muy similar el anterior, excepto que la imagen no será un enlace (porque se omite el argumento "$href").
echo JHTML::tooltip('Esta es la descripción del texto', 'Titulo Tooltip', 'tooltip.png', '', '', false);
Una descripción se puede conectar a una imagen o texto. Por ejemplo, este código:
echo JHTML::tooltip('Este es el texto del tooltip asociado', 'Titulo del Tooltip', '', 'Pasa el mouse por encima para ver el texto del tooltip');
mostrará una descripción adjunta al texto, como se muestra a continuación.
Ten en cuenta que especificar el parámetro "$text" anula cualquier imagen que hayas pasado a la descripción.
Creando un Tooltip usando el nombre de la clase CSS
Si nos fijamos en el código fuente HTML generado por el JHTML:: función descripción anterior, aquí es lo que vemos:
span class="editlinktip hasTip" title="Titulo del Tooltip::Este es el texto del tooltip asociado" style="text-decoration: none; color: #333;"> Pasa el mouse por encima para ver el texto del tooltip</span>
Esta función genera una etiqueta HTML "span" con las clases "editlinktip" y "hasTip" y un atributo llamado "título". Observa que el valor del atributo "title" tiene dos partes, <tooltip title>::<tooltip text> (en el ejemplo, "Titulo del Tooltip::Este es el texto del tooltip asociado"). Podes crear un tooltip con sólo texto o con sólo un título. El título tiene implicaciones para el estilo, como veremos a continuación.
El Javascript insertado por el comando JHTML::('behavior_tooltip') recoge la etiqueta cuya clase tiene como nombre "hasTip". Así pues, una segunda manera de crear un texto de ayuda es, simplemente, crear una etiqueta con una clase llamada "hasTip" y un atributo de "título". Por ejemplo, de la siguiente manera:
<span class="hasTip" title="Titulo del Tooltip::Este es el texto del tooltip asociado">
Pasa el mouse por encima para ver el texto del tooltip</span>
Producirá exactamente el mismo efecto que el JHTML::tooltip() ejemplo anterior.
Agregando estilos CSS al Tooltip
Por defecto, el metodo o la clase JHTML::tooltip, utiliza las siguientes tres clases CSS: .tool-tip, .tool-title, y .tool-text.
Aqui puedes ver un detalle de las mismas:
/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}
.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../images/selector-arrow.png) no-repeat;
}
.tool-text {
font-size: 100%;
margin: 0;
}
Si tienes un archivo CSS personalizado, copia y modifica a gusto el código anteior. Ten en cuenta que la clase .tool-title utiliza por defecto la imagen "selector-arrow.png". Esto es lo que le da el contorno a la descripción del puntero en la parte superior izquierda de la caja de descripción. Si se omite un título en su descripción, obtendras un rectángulo, sin el puntero.