Preferred jQuery toolTip?

There are a bunch of jquery tooltip plugins out there.

Which one should I use? and why?

Tooltip (jquery)

I am working on a tooltip with Jquery but it isnt working. Could you please help me? I dont understand why it is not working ok… Thanks!! .tooltip{ padding:5px 10px; background-color:#e5f4fe; borde

jQuery Tooltip positioning issues

HTML: <a href=# rel=tooltip-1>Open Tooltip</a> <div id=tooltip-1>Tooltip Content</div> jQuery: xOffset = $(‘#tooltip-1’).height() + 10; yOffset = -30 ; $(a[rel=tooltip-

tooltip issue in jquery

I want to display html table as tooltip in jquery.I have my own css and I want to use .tooltip({ effect: ‘slide’}); Here is my jquery $(#currency1).tooltip({ effect: ‘slide’}); Here is my html &lt

jQuery dynatree Tooltip

Using jQuery and Dynatree, I am trying to get the dynatree tooltip behavior like the jQuery normal tooltip. Did anyone get that? As for what I am getting to do, the dynatree tooltip is just the defaul

Jquery Tooltip inside Scrollable

I’m working on a tooltip based on this tutorial which uses jquery .offset() for position. page with tooltip When I place a tooltip inside a scrollable it is incorrectly positioned for all but the firs

JQuery Title Attribute Tooltip – Remove Browser Tooltip

I have the following JQuery code for tooltip that uses the title attribute string. My problem is that the browser tooltip also shows up and I can’t figure out how to work around this. function Tooltip

Creating a dynamic jquery tooltip

I make a jquery tooltip but have problem with it, when mouse enter on linke ToolTip box tooltip don’t show in next to link ToolTip it show in above linke ToolTip , how can set it? Demo: http://j

jQuery tooltip clickable?

I’m using this tooltip plugin: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ Is there any way I can make the tooltip clickable? I don’t want the tooltip to disappear when I try to mouse-

positioning jQuery tooltip

I’m trying to customise the positioning of my tooltips, using jQuery UI Tooltip and this code: $(.karma).tooltip({ position: { my: center bottom, at: right top } }); But whatever I do to my a

“Tooltip” jQuery plugin breaks

I’m working on a very light tooltip jQuery plugin. Bellow is the code: (function( $ ) { $.fn.tooltip = function() { return this.each(function(){ var target = $(this); target.on(mouseover, function

Answers

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.

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

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.

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

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.

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.