jQuery Popup Bubble/Tooltip [closed]

Answer 1

ColorTip is the most beautiful i've ever seen

Answer 2

Ok, after some work I'm able to get a "bubble" to pop up and go away at all the right times. There is a LOT of styling that needs to happen still but this is basically the code i used.

<script type="text/javascript">
    //--indicates the mouse is currently over a div
    var onDiv = false;
    //--indicates the mouse is currently over a link
    var onLink = false;
    //--indicates that the bubble currently exists
    var bubbleExists = false;
    //--this is the ID of the timeout that will close the window if the user mouseouts the link
    var timeoutID;

    function addBubbleMouseovers(mouseoverClass) {
        $("."+mouseoverClass).mouseover(function(event) {
            if (onDiv || onLink) {
                return false;
            }

            onLink = true;

            showBubble.call(this, event);
        });

        $("." + mouseoverClass).mouseout(function() {
            onLink = false;
            timeoutID = setTimeout(hideBubble, 150);
        });
    }

    function hideBubble() {
        clearTimeout(timeoutID);
        //--if the mouse isn't on the div then hide the bubble
        if (bubbleExists && !onDiv) {
             $("#bubbleID").remove();

             bubbleExists = false;
        }
    }

    function showBubble(event) {
        if (bubbleExists) {
            hideBubble();
        }

        var tPosX = event.pageX + 15;
        var tPosY = event.pageY - 60;
        $('<div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');

        bubbleExists = true;
    }

    function keepBubbleOpen() {
        onDiv = true;
    }

    function letBubbleClose() {
        onDiv = false;

        hideBubble();
    }


    //--TESTING!!!!!
    $("document").ready(function() {
        addBubbleMouseovers("temp1");
    });
</script>

Here is a snippet of the html that goes with it:

<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>

Answer 3

Although qTip (the accepted answer) is good, I started using it, and it lacked some features I needed.

I then stumbled upon PoshyTip - it is very flexible, and really easy to use. (And I could do what I needed)

Answer 4

Qtip is the best one I've seen. It's MIT licensed, beautiful, has all the configuration you need.

My favorite lightweight option is tipsy. Also MIT licensed. It inspired Bootstrap's tooltip plugin.

Answer 5

The new version 3.0 of the jQuery Bubble Popup plugin supports jQuery v.1.7.2, currently the latest and stable version of the most famous javascript library.

The most interesting feature of the 3.0 version is that You can use together jQuery & Bubble Popup plugin with any other libraries and javascript frameworks like Script.aculo.us, Mootols or Prototype because the plugin is completely encapsulated to prevent incompatibility problems;

jQuery Bubble Popup was tested and supports a lot of known and “unknown” browsers; see the documentation for the complete list.

Like previous versions, jQuery Bubble Popup plugin continues to be released under the MIT license; You are free to use jQuery Bubble Popup in commercial or personal projects as long as the copyright header is left intact.

download the latest version or visit live demos and tutorials at http://www.maxvergelli.com/jquery-bubble-popup/

Answer 6

This can be done easily with the mouseover event as well. I've done it and it doesn't take 200 lines at all. Start with triggering the event, then use a function that will create the tooltip.

$('span.clickme').mouseover(function(event) {
    createTooltip(event);               
}).mouseout(function(){
    // create a hidefunction on the callback if you want
    //hideTooltip(); 
});

function createTooltip(event){          
    $('<div class="tooltip">test</div>').appendTo('body');
    positionTooltip(event);        
};

Then you create a function that position the tooltip with the offset position of the DOM-element that triggered the mouseover event, this is doable with css.

function positionTooltip(event){
    var tPosX = event.pageX - 10;
    var tPosY = event.pageY - 100;
    $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};