Hello!

"Usage instructions" in README.txt suggest two options:
1. if the element has a TITLE attribute:
$("#some-element").simpletooltip();
2. if the element doesn't have a TITLE attribute or you want to override the TITLE attribute:
$("#some-element").simpletooltip("Tooltip text to display");

2nd doesn't work but it's very easy to fix.

Cheers, and thanks for nice, simple plugin.

I really like the simplicity of this, however I wanted it to flip to the left/top of the cursor if it got too close to the right/bottom of the screen. a small change to the code acheives this, thought I'd share it back to you.
(function($){
    $.fn.simpletooltip = function(){
        return this.each(function() {
          var text = $(this).attr("title");
          $(this).attr("title", "");
          if(text != undefined) {
            $(this).hover(function(e){
                $(this).attr("title", "");
                $("body").append("" + text + "");
                $("#simpleTooltip").css( $.fn.simpletooltip.edge(e.pageX,e.pageY) ).fadeIn("medium");
            }, function(){
                $("#simpleTooltip").remove();
                $(this).attr("title", text);
            });
            $(this).mousemove(function(e){
                $("#simpleTooltip").css( $.fn.simpletooltip.edge(e.pageX,e.pageY) ).fadeIn("medium");
            });
          }
        });
    };
    $.fn.simpletooltip.edge = function(pageX,pageY){
        /* Set your tolerance here! */      
        var tolerance = {x:200,y:100};
        var $w = $(window);
        //work out pageX relative to window (i.e. take scroll into account.)
        var screenPos = {x:pageX-$w.scrollLeft(), y:pageY-$w.scrollTop()};
        var css = {};
        if( $w.width() - screenPos.x <= tolerance.x ){
          css.right = ($(document).width()-pageX);
          css.left = null;
        }else{
          css.left = pageX+12;
          css.right = null;
        }

        if( $w.height() - screenPos.y <= tolerance.y ){
          css.bottom = ($(document).height()-pageY);
          css.top = null;
        }else{
          css.top = pageY+12;
          css.bottom = null;
        }
        return css;
    };
})(jQuery);

Thanks for your work!

Very nice plugin, could do with a few config options though such as an offset from pointer :DD

Great script, thanks for releasing this. I love the small footprint and KISS principle, but I miss having options to override some defaults, like so:

$(".tooltip").simpletooltip({
followCursor: false,
fadeSpeed: 'fast',
xOffset: 10,
yOffset: 10,
tooltipID: '#simpleTooltip'
});

So I modified it a little bit (nothing too fancy). Thought it be nice to share it here, perhaps it's of use to anyone.

(function($){ $.fn.simpletooltip = function(options){
options = jQuery.extend({
followCursor: true,
fadeSpeed: "medium",
xOffset: 12,
yOffset: 12,
tooltipID: 'simpleTooltip'
}, options);
return this.each(function() {
var text = $(this).attr("title");
$(this).attr("title", "");
if(text != undefined) {
$(this).hover(function(e){
var tipX = e.pageX + options.xOffset;
var tipY = e.pageY + options.yOffset;
$(this).attr("title", "");
$("body").append("" + text + "");
if($.browser.msie) var tipWidth = $("#"+options.tooltipID).outerWidth(true)
else var tipWidth = $("#"+options.tooltipID).width()
$("#"+options.tooltipID).width(tipWidth);
$("#"+options.tooltipID).css("left", tipX).css("top", tipY).fadeIn(options.fadeSpeed);
}, function(){
$("#"+options.tooltipID).remove();
$(this).attr("title", text);
});
if (options.followCursor == true) {
$(this).mousemove(function(e){
var tipX = e.pageX + options.xOffset;
var tipY = e.pageY + options.yOffset;
var tipWidth = $("#"+options.tooltipID).outerWidth(true);
var tipHeight = $("#"+options.tooltipID).outerHeight(true);
if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
$("#"+options.tooltipID).css("left", tipX).css("top", tipY).fadeIn(options.fadeSpeed);
});
}
}
});
}})(jQuery);

Thanks again!

First of all, you've done a great work!!!

Second, i have a sugestion...
On line number 9 (jquery.tooltip.v.1.1.js), i thing you could insert: "if ($(this).attr("title").length > 0) {" and make the script more generic...
doing this, we can define the start script for every tag without get an empty box for those tag that don't have titles declared...
Example:
$("img").simpletooltip();
$("a").simpletooltip();
$("input").simpletooltip();
$("select").simpletooltip();

Sorry about the english... i'm from Brazil...

Hugs.

Good plugin! Thanks! But I'm found small bug.

When text in tooltip very big, tooltip scrolled out.

See the screen http://ipicture.ru/Gallery/Viewfull/18089312.html

nice script man, thanks!

Is it free? License type?

to avoid IE6 overlap bug with select element use jquery.bgiframe plugin and insert line
$("#"+options.tooltipID).bgiframe();
after
$("body").append("" + text + "");

Thanks a lot, this will surely prove to be extremely useful!

To use alt tag in images use following modification:

(function($){ $.fn.simpletooltip = function(){
return this.each(function() {
var text = $(this).attr("title");

// If there are no title-tag (Images) use alt-tag
var attrText = "title";
if (text == "") {
text = $(this).attr("alt");
}

$(this).attr(attrText, "");
if(text != "") {

$(this).hover(function(e){
var tipX = e.pageX + 20;
var tipY = e.pageY + 15;
$(this).attr(attrText, "");
$("body").append("" + text + "");
if($.browser.msie) var tipWidth = $(",simpleTooltip").outerWidth(true)
else var tipWidth = $(".simpleTooltip").width()
$(".simpleTooltip").width(tipWidth);
$(".simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
}, function(){
$(".simpleTooltip").remove();
$(this).attr(attrText, text);
});
$(this).mousemove(function(e){
var tipX = e.pageX + 20;
var tipY = e.pageY + 15;
var tipWidth = $(".simpleTooltip").outerWidth(true);
var tipHeight = $(".simpleTooltip").outerHeight(true);
if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
$(".simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
});
}
});
}})(jQuery);

// Execute
$(document).ready(function(){
$(".jQTooltip").simpletooltip();
});

Hello Marius!

I really liked this plugin but while using it, I found that I can further simplify your code. Also I have added few options:

http://jquery.pastebin.com/f2c3b8c74

thanks i got the tool tip. implemented in sharepoint custom list.