
Sexy Tooltips te permite crear tooltips realmente sexys. Reemplaza esos feos, aburridos y amarillos tooltips del navegador, por unos con toda la onda!






Puedes ver una demo de Sexy Tooltips clickeando en la siguiente imagen:
En el caso de :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script> <script type="text/javascript" src="js/sexy-tooltips.v1.1.mootools.js"></script> <link rel="stylesheet" href="js/sexy-tooltips/coda.css" type="text/css" media="all"/>
o en :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script type="text/javascript" src="js/sexy-tooltips.v1.1.jquery.js"></script> <link rel="stylesheet" href="js/sexy-tooltips/coda.css" type="text/css" media="all"/>
Donde… :
coda.css es el nombre del estilo a usar. Puedes elegir entre estos estilos:
En MooTools:
<script type="text/javascript">
document.addEvent('domready', function() {
$('a1').tooltip ('<h1>Title Formating</h1><p>Example of simple tooltip.</p>', {
width: 200,
style: 'alert',
sticky: 1,
hook: 1
});
});
</script>
En jQuery:
<script type="text/javascript">
$(document).ready(function(){
$('#a1').tooltip ('<h1>Title Formating</h1><p>Example of simple tooltip.</p>', {
width: 200,
style: 'alert',
sticky: 1,
hook: 1
});
});
</script>
Donde… $(‘a1′) es un elemento de la página. Puedes poner tooltips a cualquier elemento del DOM.
Element.tooltip(content, options)
Crea el tooltip para ese elemento.
@content (string) El mensaje a mostrar.
@options (array) Opciones del estilo del tooltip.
Ejemplo:
$('example').tooltip('Hello world.', { mode: 'tl', width: 140, hook: 1 });
Element.tooltip_hide()
Oculta el tooltip.
Evento lanzado cuando el tooltip termina de mostrarse.
MooTools:
$('element').addEvent('tooltipshow', function() {
alert('tooltip event fired');
});
jQuery:
$('element').bind('tooltipshow', function() {
alert('tooltip event fired');
});
Evento lanzado cuando el tooltip termina de cerrarse.
MooTools:
$('element').addEvent('tooltiphide', function() {
alert('tooltip event fired');
});
jQuery:
$('element').bind('tooltiphide', function() {
alert('tooltip event fired');
});
El script es publicado bajo la licencia MIT.
Nada. Pero puedes colaborar comprándome un café
Este artÃculo contiene los siguientes archivos:
Sexy ToolTips 1.1 - Octubre 16, 2009 * BugFixed: Textarea scroll bug * BugFixed: Window scroll bug * Creada la versión para jQuery * Agregada Compatibilidad con IE6 Sexy ToolTips 1.0.0 - Septiembre 01, 2009 * Versión Inicial. * Mootools 1.2.3
Lo que puedo decir es que es realmente fantástico.
Excelente esta demasiado bonito y practico.
Lastima que todavia no se pueda usar con jQuery.
Saludos y muchisimas Gracias !!!
Construà esta versión pensando en jQuery
asà que espero que sea fácil la metamorfosis.
Eduardo: Encontré un pequeño bug, ya no van a tener un sistema de foros para realizar preguntas y hacer aportes????
En estos dias levanto el foro. ¿PodrÃas enviarme el bug por mail desde la sección contactenos?
Gracias.
Eduardo ya te envÃe el reporte del bug, he encontrado dos, si te puedo colaborar de alguna forma para solucionarlo me avisas. Un saludo
Eduardo: Te envié la solución que yo encontré a uno de los bugs a tu correo, espero te sirva, y ojala encuentres una solución para el otro bug.
se ve genial…esperare por la version jquery…para utilizar en mi galeria…ya que tengo problemas en la implementacion con qtip….
Muchas Gracias Eduardo de verdad que tienes una dedicacion al trabajo envidiable.
Saludos.
sos genial cada vez sorprendes mas, que buen trabajo por ahi de ves en cuando te regalo unos click para retrubuir un poco tu trabajo ,, saludos desde colombia k la pases bien y espero que estes pensando en una clase para desarrollo con php y mysql que maneje conexiones insert select y demas de ante mano te felicito por exelente trabajo los sexy form son geniales…
mmm como seria para ponerlo en smf http://www.simplemachines.org
tienes que agregar los java en el index.template.php.
asi:
Muy bueno, me gusta mucho el blog !
Solo tengo un pregunta… Como se hace el efecto este que tiene el “últimos comentarios” ?
Saludos!
muchas grax lo voy a probar ^
d nada y suerte xD…
no me sirvio siempre me tira error plantilla en el recent.template.php pero gracias estan buenisimos los tooltip
El SMF es un poco raro para estas cosas tienes q poner todo el code en php si no va a funcionar.
As probado hacer un topico en el foro oficial del SMF ? tiene un apartado en español !
Saludos
ok lo hare haber si alguien se copa por ayudarme ahi grax denuevo
D nada xD
Thank’s for all. This plug-in very helpful !
Pues si es muy bueno solo que intentaba probarlo, pero estoy utilizando el JCAROUSEL y eso esta trabajado en JQuery, y bueno estoy teniendo problemas, y quisiera saber si la misma solucion que existe en SexyLightbox, sirve?, o que otra puedo utilizar.
Gracias
Bueno Eduardo, ojala me puedas ayudar.
lo que pasa es que intente iomplementar el Sexy ToolsTips, junto con el JCAROUSEL como STT, utiliza Mootools, y JC, utiliza JQuery, hay un conflicto, pense que colocando jQuery.noConflict();, por que como en el JC, coloca ya en sus JS la palabra JQuery, ya no era necesario cambiar nada, entonces pude hacer correr el efecto carrusel, pero no logro ejecutar el STT, y no se a que se deba.
Si hay un error de sintaxis, quizas sea yo al publicar el codigo.
. de antemano.
Porfavor ayudame o dame una posible solucion, o si ya tienes STT en JQuery, ponlo ya!, Gracias
DjMiki es muy común que los scripts de mootools no funcionen con jQuery.
La nueva versión de MooTools está construida para derribar esta barrera, pero esto se hace poco a poco y con paciencia.
Por ahora seguiré codeando en ambos scripts, pero siempre empiezo por mootools.
Encontré una solución para tu problema:
Consiste en que abras el archivo sexy-tooltips.mootools.js y busques y reemplaces lo siguiente:
debe quedar:
Luego cuando creas el tooltip, lo mismo:
<script type="text/javascript"> document.addEvent('domready', function() { document.id('a1').tooltip ('example', { width: 200 }); }); </script>Asà podrás tener jQuery y MooTools en la misma página, por lo menos hasta que saque la versión en jQuery jeje
Saludos
Muchas gracias Eduardo, si me funciono, muy bien todo, ahora solo are un diseño, ya que deseo un TooTip, oscuro, pero chevere eh, si podrias postear tambien los psd, vcan pues, gracias, otra vez por la respuesta y la gran ayuda, espero a los demas ayuden.
GRACIAS MUCHA SUERTE.
Hola Eduardo
Estoy armando una pagina y ya tengo implementado el SexyLightBox (que funciona perfecto). Tambien implemente el “sexy-tooltips” haciendo document.id( (que le sujeriste a djMiki)
funciona bien en Firefox pero no logro que funcione en Explorer 6… es por la version de explorer?
Gracias!
Eduardo…
omiti decirte que estoy usando la version 1.1. de “sexy Tooltips” que ya tiene la modificacion hecha (document.id() en el archivo sexy-tooltips.mootools.js
Gracias!
Hola eduardo, como puedo ejecutar el tooltip llamandolo de un click , y que se despliegue en otra area no en la que hice el click probe pero no me funciono saludos.
gracias de antemano
podria con jquery atacar a muchos elementos que tengan el mismo id porque lo he provado i solo me funciona con el primer elemento.
Que onda, quiero usar los sexy-tooltips junto con el tiny.js, explico, el tiny.js es un javascript para acomodar tablas dinamicamente por cualquiera de los campos que se muestran, al principio me lo jala y todo, pero ya cuando hago uso del acomodado dinamico de mi tabla con el tiny.js, ya no funcionan los sexy-tooltips, si alguien a manejado estos 2 juntos o si saben de como lo puedo solucionar se los agradeceria
$(document).ready(function(){ $('#a1').tooltip ('Title FormatingExample of simple tooltip.', { width: 200, style: 'alert', sticky: 1, hook: 1 }); });este es mi codigo pero en que momento le pongo para el objeto que modifico en mi codigo
No entiendo eso de “para el objeto que modifico” pero si a lo que te referis es para el “trigger” osea para el objeto por el cual cuando le pases el mouse salte el tooltip, entonces es en la parte que dice ‘#a1′
Por ejemplo si tienes lo siguiente:
Tu código deberÃa ser:
$('#hello').tooltip(....Oye Eduardo, primeramente un saludo y una felicitación por esta web y por tus proyectos, mmmm aqui viene lo bueno jejeje , hace apenas unos dias empeze a utilizar los sexytooltips que has hecho, bueno mi pregunta es:
¿¿puedes hacer referencia a el tooltip con el DOM???
por ejemplo: $(‘tooltip’) asi mas o menos.
ojo no me refiero al objeto que contendra el tooltip, si no al tooltip en especifico.
de antemano gracias.
Dhamasito. Creo que la respuesta es NO debido a que el ST no posee un id. Hasta donde yo sé, y esto me imagino no se puede cambiar debido a que en una misma página pueden existir múltiples ST.
Si se puede, te explico como:
var objTOOLTIP = $('link').tooltip(....);objTOOLTIP es el objeto clase del tooltip. Ahora, no se a que parte deseas acceder, pero por ejemplo puedes obtener el div contenedor del tooltip de la siguiente manera:
objTOOLTIP.tooltip // devuelve el DOM del contenedor // ejemplo: objTOOLTIP.tooltip.css({ opacity: 0.9 });mmmmmm, gracias por tu respuesta esutoraiki, esperaba que hubiera una manera de hacer referencia a el tooltip, pero si no se puede ni modo.
hasta luego.
mmmm, Oye Eduardo : Mira creo que encontre un bug del tooltip, ya que este se queda pegado al objeto trigger y nunca desaparece aunque quites el cursor del objeto. Esto ocurre al hacer una selección a la base de datos y quedandote posicionado en el trigger, ahy es cuando se queda trabado el tooltip, por eso pregunte que si habia alguna manera de obtener el dom del tooltip para ocultarlo manualmente con hide();
ojala me puedan ayudar.
de antemano gracias por sus respuestas y si quieres te mando el bug un poco mas explicado a tu correo.
Me encantarÃa ver un ejemplo de eso, o por lo menos que me digas cual es el tag del trigger.
Si puedes mándame mas información a mi correo, desde la sección Contactanos de esta página.
Gracias.
que tal eduardo, ya pude resolver lo del problema que tenia con el tooltip:
el problema era que no limpiaba el div contenedor y cada ves que se producia una respuesta del server con xajax pues se creaba un nuevo tooltip.
al final si a alguien le sirve hise algo como esto:
$objResponse->assign(“$id_div”,”innerHTML”,”");
un saludote desde mexico y hasta luego.
Excelente, deberÃas pensarte en un pluging para WordPress, es más yo ando buscando implementar algo asà en uno de mis sitios. si te interesa avisame y miramos que podemos hacer.
como debe aplicarse en un form
tengo un problema resulta que cuando el input esta cerca del borde del documento en este caso del borde top el tooltip hace su trabajo re-posicionandose pero resulta que me bloquea los campos del form que se puede hace al respecto
saludos
Holla,
Como yo uso con uno link?
Gracias
I got it… Mouseover ! Gracias
Otra pregunta:
¿Dónde puedo configurar mode: ‘tl’: No sexy-tooltips.v1.1.jquery o javascript de la página,
$ ( ‘# A1′). Tooltip …? Quiero la descripción arriba ya la izquierda, pero esta abarro. Gracias … Pronto voy a enviar el café:)
eduardo, hay forma de cargar la información que se mostrará via ajax?
felicitaciones por tu trabajo, un saludo