पसंदीदा jQuery टूलटिप?

Question

वहाँ jquery टूलटिप प्लगइन्स का एक समूह है।

मुझे किस का उपयोग करना चाहिए? और क्यों?

Answer 1

हमने हमारी परियोजनाओं में से एक में qTip का उपयोग किया है, क्योंकि यह हमारी सभी आवश्यकताओं को अनुरूप बनाता है, अच्छी तरह से विकसित और रखरखाव, उत्कृष्ट दस्तावेज वाले जहाजों और पहले से ही अच्छे दिखने वाले टेम्पलेट्स और हमें उच्च स्तर की अमूर्तता भी प्रदान करता है और अनुकूलन।

Answer 2

very small and fast lots of fancy stuff

Answer 3

मैं अपने नवीनतम वेबसाइट में wayfarerweb.com/wtooltip.php इस्तेमाल किया है। उपयोग करने में आसान है, लेकिन कभी-कभी IE टेक्स्ट के बजाय NULL प्रदर्शित करता है।

Answer 4

मैंने वास्तविक jQuery tooltip का उपयोग किया है। Here's यह क्या कर सकता है इसका एक डेमो। इसका उपयोग करना आसान है और आप उपस्थिति को कॉन्फ़िगर कर सकते हैं।

Answer 5

मैंने Robert Baumgartner's tooltip स्क्रिप्ट को काफी अनुकूलित किया है, इसलिए यह स्क्रीन से आइटम को पॉप नहीं करेगा। मैं इसे अपने मास्टर पेज में जोड़ता हूं और पेज तैयार होने पर इसे स्वचालित रूप से निष्पादित कर दिया जाएगा।

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

मैंने एक बेहद सरल टूलटिप प्लगइन लिखा था। आप इसे देख सकते हैं @http://plugins.jquery.com/project/hovertiphtml यह टूलटिप/hovertip (जो अधिकांश टूलटिप प्लगइन्स नहीं करता) और कस्टम सीएसएस के अंदर पूर्ण HTML मार्कअप का समर्थन करता है।

Answer 7

मैं अत्यधिक http://craigsworks.com/projects/qtip2/ बनाम qtip v1 की अनुशंसा करता हूं। qtip v1 अब बनाए रखा नहीं है, और qtip2 में कुछ शानदार नई विशेषताएं हैं।