Suggerimento strumento jQuery preferito?

Question

Ci sono un sacco di plugin per tooltip jQuery.

Quale dovrei usare? e perché?

Answer 1

Abbiamo utilizzato qTip in uno dei nostri progetti, in quanto conforme molto tutti i nostri requisiti, è ben sviluppato e mantenuto, navi con eccellente documentazione e già modelli di bello da vedere e ci ha anche un alto grado di astrazione e personalizzazione.

Answer 2

very small and fast lots of fancy stuff

Answer 3

ho usato wayfarerweb.com/wtooltip.php nel mio ultimo sito web. Facile da usare, ma a volte IE visualizza NULL anziché testo.

Answer 4

Ho utilizzato l'attuale jQuery tooltip. Here's una demo di cosa può fare. È facile da usare e puoi configurare l'aspetto.

Answer 5

Ho personalizzato lo script Robert Baumgartner's tooltip un po 'così da non far scoppiare gli elementi dallo schermo. Lo aggiungo alla mia pagina Master e verrà eseguito automaticamente quando la pagina è pronta.

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

Ho scritto un plugin tooltip estremamente semplice. Puoi trovarlo @http://plugins.jquery.com/project/hovertiphtml Supporta il markup html completo all'interno del tooltip/hovertip (che la maggior parte dei plugin tooltip non fanno) e dei CSS personalizzati.

Answer 7

Consiglio vivamente http://craigsworks.com/projects/qtip2/ vs qtip v1. qtip v1 non è più mantenuto e qtip2 ha alcune grandi novità.