jQuery toolTip preferido?

Question

Hay un montón de complementos de herramientas jquery disponibles.

¿Cuál debo usar? ¿y por qué?

Answer 1

Hemos utilizado qTip en uno de nuestros proyectos, porque cumple con todos nuestros requisitos, está bien desarrollado y mantenido, se envía con excelente documentación y plantillas bonitas y también nos dio un alto grado de abstracción y personalización.

Answer 2

very small and fast lots of fancy stuff

Answer 3

he utilizado wayfarerweb.com/wtooltip.php en mi sitio Web más reciente. Fácil de usar, pero a veces IE muestra NULL en lugar de texto.

Answer 4

He usado el actual jQuery tooltip. Here's una demostración de lo que puede hacer. Es fácil de usar y puedes configurar la apariencia.

Answer 5

He personalizado la secuencia de comandos Robert Baumgartner's tooltip bastante para que no saque elementos de la pantalla. Simplemente lo agrego a mi página maestra y se ejecutará automáticamente cuando la página esté lista.

window.viewport = 
{ 
    height: function() { 
     return $(window).height(); 
    }, 

    width: function() { 
     return $(window).width(); 
    }, 

    scrollTop: function() { 
     return $(window).scrollTop(); 
    }, 

    scrollLeft: function() { 
     return $(window).scrollLeft(); 
    } 
}; 


jQuery.tooltip = function() { 
    tooltipClass = ".tooltip"; // replace with your class, for multiple classes, separate with comma. 

    function str_replace(search, replace, subject) { 
     return subject.split(search).join(replace); 
    } 

    xOffset = 10; 
    yOffset = 20; 
    fadeInTime = 300; 

    function positionToolTip(e) { 
     var offsetFromTop = e.pageY - viewport.scrollTop(); 
     var offsetFromLeft = e.pageX - viewport.scrollLeft(); 
     var tooltipObj = $('#tooltip'); 
     var pxToBottom = viewport.height() - (e.pageY - viewport.scrollTop()); 
     var cssTop = 0; 
     var cssLeft = (e.pageX + yOffset); 
     var topMargin = parseFloat(tooltipObj.css('marginTop')); 
     if (isNaN(topMargin)) { 
      topMargin = 0; 
     } 
     var topPadding = parseFloat(tooltipObj.css('paddingTop')); 
     if (isNaN(topPadding)) { 
      topPadding = 0; 
     } 
     var topBorder = parseFloat(tooltipObj.css('border-top-width')); 
     if (isNaN(topBorder)) { 
      topBorder = 0; 
     } 
     var topOffset = topMargin + topPadding + topBorder; 

     if (tooltipObj.height() > viewport.height()) { 
      cssTop = viewport.scrollTop() - topOffset + topPadding; 
     } 
     else if (tooltipObj.height() > pxToBottom) { 
      cssTop = viewport.scrollTop() + (viewport.height() - tooltipObj.height()) - topOffset - topPadding - topBorder; 
     } 
     else { 
      cssTop = e.pageY - xOffset; 
     } 

     tooltipObj.css({ top: cssTop, left: cssLeft }).fadeIn(fadeInTime); 
    } 

    jQuery("[title]").hover(function(e) { 
     if (this.t === undefined || this.t.length == 0) { 
      this.t = this.title; 
      this.title = ""; 
      this.t = str_replace("::", "<br />", this.t); 
      this.t = str_replace("[!]", "<span class='tooltipTitle'>", this.t); 
      this.t = str_replace("[/!]", "</span><br />", this.t); 
      this.t = str_replace("[", "<", this.t); 
      this.t = str_replace("]", ">", this.t); 
     } 
     if (this.t != "") { 
      jQuery("body").append("<p id='tooltip'>" + this.t + "</p>"); 
      positionToolTip(e, this); 
     } 
    }, function() { 
     jQuery("#tooltip").remove(); 
    }); 
    jQuery("[title]").mousemove(function(e) { 
     positionToolTip(e); 
    }); 
    jQuery("[title]").bind('remove', function() { 
     jQuery("#tooltip").remove(); 
    }); 
    jQuery("[title]").bind('disabled', function() { 
     jQuery("#tooltip").remove(); 
    }); 
} 

jQuery(document).ready(function() { 
    jQuery.tooltip(); 
}); 

Answer 6

Escribí un complemento de información sobre herramientas extremadamente simple. Puede encontrarlo @http://plugins.jquery.com/project/hovertiphtml Es compatible con el marcado HTML completo dentro de la información sobre herramientas/hovertip (que la mayoría de los complementos de información sobre herramientas no) y CSS personalizado.

Answer 7

Recomiendo encarecidamente http://craigsworks.com/projects/qtip2/ vs qtip v1. qtip v1 ya no se mantiene, y qtip2 tiene algunas características nuevas.