YooTooltips

Me han gustado una barbaridad: porque se despliegan con una suavidad que parecen salir d euna nube; porque se les puede cambiar el ancho a voluntad; porque se despliegan con imágenes, HTML, texto, y cualquiera que sea su contenido; y porque no son difíciles de insertar (a sensu contrario de otros plugins de Yoo).

Mi demo, con todas las "variedades", está AQUÍ

ASÍ SE HACE:

.- CSS Y SCRIPTS: Necesiamos un link al CSS de la Tooltip, un script para el js y otro que nos enlace a la librería yoo-mootools:

<link href='http://tools.yootheme.com/plugins/content/yoo_tooltip/yoo_tooltip.css.php' rel='stylesheet' type='text/css'/>



<script src='http://tools.yootheme.com/templates/yoo_yootheme/lib/js/mootools.js.php' type='text/javascript'/>

<script src='http://tools.yootheme.com/plugins/content/yoo_tooltip/yoo_tooltip.js' type='text/javascript'/>

Y vuelvo a lo de siempre: procurad abrir estos scripts y subirlos a vuestro propio servidor.

.- HTML: Estas son las posibilidades (teniendo en cuenta que las otras tooltips que conozco no tienen ninguna.... todo lo que sea más de una es muchísimo):
Ojo con el script que va contenido dentro de cada referencia a la tooltip: sin script no hay tooltip que valga:

<div class="whitebox">

<div style="float: right; margin: 0px 150px 0px 0px;"><div id="yoo-tooltip-1" class="yoo-tooltip-toggler"><img width="140" height="100" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip_icon.png"/></div><script>new YOOtooltip('yoo-tooltip-1', 'La Tooltip de Yoo puede aparecer dslizando el ratón sobre texto, imágenes y cualquier tipo de HTML.', { mode: 'cursor', display: 'block', width: 250, style: 'default' });</script></div>

<strong>Tooltip con texto:</strong> <div id="yoo-tooltip-2" class="yoo-tooltip-toggler">PASA EL RATÓN POR AQUÍ!</div><script>new YOOtooltip('yoo-tooltip-2', 'Esta Tooltip puede desplegarse sobre cualquier tecto dentro de ella.', { mode: 'cursor', display: 'inline', width: 250, style: 'default' });</script>

<br /><strong>Tooltip con imagen:</strong> <div id="yoo-tooltip-3" class="yoo-tooltip-toggler">Mueve aquí el ratón!</div><script>new YOOtooltip('yoo-tooltip-3', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip.png"/><strong>YOOtooltip</strong><br /><br />Esta Tooltip puede desplegarse sobre cualquier imagen dentro de ella.', { mode: 'cursor', display: 'inline', width: 250, style: 'default' });</script>

<br /><strong>Tooltip con contenido HTML:</strong> <div id="yoo-tooltip-4" class="yoo-tooltip-toggler">Mueve el ratón por aquí!</div><script>new YOOtooltip('yoo-tooltip-4', '<strong>YOOtooltip</strong><br /><span class="info">Esta YOOtooltip puede desplegarse sobre cualquier contenido HTML dentro de ella.</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default' });</script>



<br /><strong>Tooltip con ancho 300px:</strong> <div id="yoo-tooltip-5" class="yoo-tooltip-toggler">Mueve el ratón aquí!</div><script>new YOOtooltip('yoo-tooltip-5', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip.png"/><strong>YOOtooltip</strong><br /><span class="info" style="width: 80px">TEsta Tooltipo tiene diferentes anchos.</span>', { mode: 'cursor', display: 'inline', width: 300, style: 'default' });</script>

<br /><strong>Tooltip con ancho 400px:</strong> <div id="yoo-tooltip-6" class="yoo-tooltip-toggler">Mueve el ratón aquí!</div><script>new YOOtooltip('yoo-tooltip-6', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip.png"/><strong>YOOtooltip</strong><br /><span class="info" style="width: 180px">Diferentes anchos.</span>', { mode: 'cursor', display: 'inline', width: 400, style: 'default' });</script>

<br /><strong>Tooltip con ancho 500px:</strong> <div id="yoo-tooltip-7" class="yoo-tooltip-toggler">Pasa el ratón or aquí!</div><script>new YOOtooltip('yoo-tooltip-7', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip.png"/><strong>YOOtooltip</strong><br /><span class="info" style="width: 280px">Diferentes anchos.</span>', { mode: 'cursor', display: 'inline', width: 500, style: 'default' });</script>

</div>



Y una prueba "de la casa":



<div id="yoo-tooltip-3" class="yoo-tooltip-toggler">Mueve aquí el ratón!</div><script>new YOOtooltip('yoo-tooltip-3', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="PRUEBA!" alt="PRUEBA!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilfpKw0-ePz4_Ge0XfB4Qkqkow_R4AIUiqjEAgxE-2gITR-RApcHFgf-65ZobKaKqWRCtsxrtLeoyVvwDjIQNVczNdX2oT5vknYUudXZiQITqNZixH-bCGi081btZHzD4H-JYcZWO6UEt1/s400/Life.jpg"/><strong>YOOtooltip</strong><br /><br />Esta Tooltip puede desplegarse sobre cualquier imagen dentro de ella.', { mode: 'cursor', display: 'inline', width: 250, style: 'default' });</script>

¿A que es genial?- Por cierto: que Yoo ha cambiado su página de inicio en este mismo mes (para añadir más funcionalidades). Ahora están aquí las extensiones (de siempre y nuevas): YOO. Muy, pero que muy interesantes...