que es un tooltip? es un mensaje emergente que sale de imagenes, textos etc etc ejemplo:
![[Imagen: 334jig4.png]](http://i26.tinypic.com/334jig4.png)
bueno hace ya bastante tiempo alguien posteo un tooltip con jquery para mybb, pero no era adaptable para cualquier plantilla de mybb.
con este tooltip echo basicamente con css y etiquetas <span> lograremos un tooltip sencillo pero muy bueno.
se dirigen al panel de admin de su foro / Plantillas y Estilos / Tu Tema / global.css / editar hoja de estilo - modo avanzado /
bajan a lo ultimo y agregan este estilo :
Para que el tooltip surta efecto tiene que colocarle class="Ntooltip" y encerrar el texto que quieren en el tooltip con las etiquetas <span></span> ejemplo:
en el menu de mi web el codigo para cada imagen es el siguiente:
<td><a href="{$mybb->settings['bburl']}/index.php"><img src="/homepage_nav.png" border="0" alt="" /></a></td>
para que tooltip salga le agrege la clase Ntooltip y el span :
<td><a href="{$mybb->settings['bburl']}/index.php" class="Ntooltip"><img src="/homepage_nav.png" border="0" alt="" /><span>Portal</span></a></td>
resultado:
![[Imagen: 2w57qde.png]](http://i32.tinypic.com/2w57qde.png)
*Ustedes jueguen con el code css y varien en el estilo forma, color, posicion, etc, etc .. cualquier cosilla pregunten, les respondo altok.
bueno hace ya bastante tiempo alguien posteo un tooltip con jquery para mybb, pero no era adaptable para cualquier plantilla de mybb.
con este tooltip echo basicamente con css y etiquetas <span> lograremos un tooltip sencillo pero muy bueno.
se dirigen al panel de admin de su foro / Plantillas y Estilos / Tu Tema / global.css / editar hoja de estilo - modo avanzado /
bajan a lo ultimo y agregan este estilo :
Código:
a.Ntooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
color:#0080C0 !important; /* forzar color del texto */
font-weight:bold !important; /* forzar negritas */
}
a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
}
a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}
a.Ntooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:-2em; left:4em; /* donde va a estar */
width:120px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* el color de fondo por defecto */
border: 1px dashed #fff; /* el borde del tooltip */
color: #FFFFFF; /* el color de los textos por defecto */
-webkit-border-top-left-radius: 10px; /* esquina redondeada */
-webkit-border-bottom-right-radius: 10px; /* esquina redondeada */
}Para que el tooltip surta efecto tiene que colocarle class="Ntooltip" y encerrar el texto que quieren en el tooltip con las etiquetas <span></span> ejemplo:
en el menu de mi web el codigo para cada imagen es el siguiente:
<td><a href="{$mybb->settings['bburl']}/index.php"><img src="/homepage_nav.png" border="0" alt="" /></a></td>
para que tooltip salga le agrege la clase Ntooltip y el span :
<td><a href="{$mybb->settings['bburl']}/index.php" class="Ntooltip"><img src="/homepage_nav.png" border="0" alt="" /><span>Portal</span></a></td>
resultado:
*Ustedes jueguen con el code css y varien en el estilo forma, color, posicion, etc, etc .. cualquier cosilla pregunten, les respondo altok.