Dar estilos a los tooltip de Joomla

Uno de los problemas que nos encontramos al realizar nuestra plantilla para joomla, es modificar los tooltips que aparecen en formularios como por ejemplo el de registro de usuarios.

Al colocarnos sobre las labels del formulario nos muestra el contenido del tag title, pero sin ningun estilo. Si no aplicamos estilos a estos tooltips, nuestro formulario da una sensación muy pobre y poco profesional.

Sin embargo es muy facil cambiar esta situacion únicamente utilizando unas pocas clases de css, podemos lograr que nuestros tooltips luzcan de este modo:

Tooltips en joomla

Para conseguir este efecto basta con añadir estos estilos al archivo css de nuestro template:

.tip {float:left;background: #ffc;border: 1px solid #D4D5AA;padding: 5px;max-width: 200px;}
.tip-title {padding: 0;margin: 0;font-size: 100%;font-weight: bold;margin-top: -15px;padding-top: 15px;padding-bottom: 5px;}
.tip-text {font-size: 100%;margin: 0;}

Con estas lineas de css logramos modificar los estilos a los tooltip de joomla, y dar una apariencia más profesional a nuestros formularios.

Esta entrada fue publicada en Plantillas. Guarda el enlace permanente.

4 respuestas a Dar estilos a los tooltip de Joomla

  1. Nuria dijo:

    Sencillo pero efectivo truco. Lo acabo de implementar en la Web de mi colegio y ha quedado de lujo. Muchas gracias.

  2. todojoomla dijo:

    Me alegro de que te haya gustado. Sencillo, pero ganan mucho los tooltips de Joomla.
    Por cierto, tiene muy buena pinta la web del cole de Lumbier.
    Un saludo.

  3. Felix dijo:

    Hola buenas y para joomla 3 lo he puesto pero no me sirve, o como los puedo quitar, gracias

  4. Guillermo dijo:

    hola lo estoy probando para los link de joomla 2.5 y no me funciona, por favor me puedes ayudar

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s