Tutorial :Preferred jQuery toolTip?



Question:

There are a bunch of jquery tooltip plugins out there.

Which one should I use? and why?


Solution:1

We've used qTip in one of our projects, because it conforms much all of our requirements, is well-developed and maintained, ships with excellent documentation and already nice-looking templates and also gave us a high degree of abstraction and customization.


Solution:2

I would highly recommend http://craigsworks.com/projects/qtip2/ vs qtip v1. qtip v1 is no longer maintained, and qtip2 has some great new features.


Solution:3

very small and fast lots of fancy stuff


Solution:4

I've customized Robert Baumgartner's tooltip script quite a bit so it won't pop items off the screen. I just add it to my Master page and it will get executed automatically when the page is ready.

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();  });  


Solution:5

I've used the actual jQuery tooltip. Here's a demo of what it can do. It's easy to use and you can configure the appearance.


Solution:6

I have used wayfarerweb.com/wtooltip.php in my latest website. Easy to use, but somethimes IE displays NULL instead of text.


Solution:7

I wrote an extremely simple tooltip plugin. You can find it @ http://plugins.jquery.com/project/hovertiphtml It supports full html markup inside the tooltip/hovertip (which most tooltip plugins don't) and custom css.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »