CODEWITHSUNDEEP
jqueryjquery-plugins
Cheeso
Cheeso

Reputation: 192587

Preferred jQuery toolTip?

There are a bunch of jquery tooltip plugins out there.

Which one should I use? and why?

Upvotes: 12

Views: 3195

Answers (7)

desbest
desbest

Reputation: 4906

I prefer to follow the tutorial at I love colors. There is no jquery plugin needed.

http://www.ilovecolors.com.ar/rollovers-and-tooltips-with-jquery

https://archive.is/bh4nW

The tutorial is below.

Rollovers and tooltips with jQuery

I needed a quick setup for doing some rollovers and tooltips. You know, the usual stuff, mouse over an icon changes image and shows a tooltip. I thought about taking advantage of html tags attributes manipulation through jQuery. If you want to jump in right now you can go to the

Now, if you’re still with me, let’s take a walk through the code. This tutorial assumes that you have a basic knowledge of html, css and jquery. The markup

This is pretty straight, just an unordered list with three items and each item has a link

<ul id="iconbar">
<li><a href="#">
<img src="key.gif" alt="" />
<span>Change your password</span>
</a></li>
<li><a href="http://feeds.feedburner.com/ilovecolors" target="_blank">
<img src="rss.gif" alt="" />
<span>Suscribe to our RSS!</span>
</a></li>
<li><a href="#">
<img src="sel.gif" alt="" />
<span>Choose your options!</span>
</a></li>
</ul>

However, inside each link we have two important blocks: the icon image and a span. On the img tag, we’ll be changing its src attribute. The span tag is what we will be using for the tooltip. Initially the img tag has a default src value and the span is hidden, when the time comes and the hover event is triggered, the img src attribute is redirected to a different location (another image) and the span is displayed showing the text you defined.

The styling

The style is a bit longer to read but we’re only styling two items: the li containter and the span block.

#iconbar li {
float:left; position:relative; margin-right:20px;
}
#iconbar span {
position: absolute;
top: -50px;
left: -80px;
display: none;
background: url(ttbg.jpg) no-repeat;
width: 110px;
height: 35px;
text-align: center;
padding: 5px;
line-height:110%;
color:#000000;
}

We’re defining an absolute position inside the relative position of our li element. Now we can assign some top and left values to position it. The values will be modified by our jQuery script later. The display is set to none, since we don’t want the span to be visible when we first open the page. The icons doesn’t require styling since we’re changing only the src attribute through jQuery. The jQuery code

jQuery is truly amazing, with only a few lines of code we can have our icon rollover and tooltip ready. So, let’s get to it. When the DOM is ready, we’re launching a function based on the hover state of the li element within our iconbar. When it’s launched, it will get the src attribute of the image within li and it will store the name without the extension in a variable named origen.

jQuery(document).ready(function(){
$("#iconbar li").hover(
function(){
var iconName = $(this).find("img").attr("src");
var origen = iconName.split(".")[0];

Next, we assign a new path to the src attribute of img, appending “o” to the name, and the corresponding extension, in this case, “.gif”. The tooltip section begins animating its opacity to fade in and the top position (remember the values on the style sheet?).

$(this).find("img").attr({src: "" + origen + "o.gif"});
$(this).find("span").animate({opacity: "show", top: "-60"}, "normal");
},

Please, notice the comma separating the two functions. The hover event in jQuery takes two parameters: one for the mouse rollover state and one for the mouse rollout state. Now we get to the rollout state, this is what happens when the mouse rolls out of the li area. We take the image src attribute again and we split at the “o.”, the string we added on the hover event, and we redirect the src attribute to the original image path. The tooltip is animated towards a zero opacity, and we position it at the same top value that is defined in the stylesheet, in this case, 50. Notice that I haven’t added the “px” values. Don’t be as lazy as me and add them, but you can see that it still works without the “px” dimensions. We hide it fast to prevent any conflicts with any other thing. You know, when something can go wrong, it will, so don’t give it a chance.

function(){
var iconName = $(this).find("img").attr("src");
var origen = iconName.split("o.")[0];
$(this).find("img").attr({src: "" + origen + ".gif"});
$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
});
});

Of course, some of you might be thinking that you can place anything inside that little cute span and indeed, it’s possible. For example, an icon.

<ul>
<li><a href=”#”>
<img src=”sel.gif” alt=”” />
Choose your options!<img src=”sel.gif” alt=”” />
</a></li>
</ul>

Upvotes: 0

rynop
rynop

Reputation: 53669

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.

Upvotes: 2

rosscj2533
rosscj2533

Reputation: 9323

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.

Upvotes: 1

BalusC
BalusC

Reputation: 1109292

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.

Upvotes: 15

a432511
a432511

Reputation: 1905

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.

Upvotes: 0

Agent_9191
Agent_9191

Reputation: 7253

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

Upvotes: 1

Roger
Roger

Reputation: 1082

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

Upvotes: 0

Related Questions