jQuery Popup Bubble/Tooltip [closed]

jQuery Popup Bubble/Tooltip [closed]

I’m trying to make a “bubble” that can popup when the onmouseover event is fired and will stay open as long as the mouse is over the item that threw the onmouseover event OR if the mouse is moved into the bubble. My bubble will need to have all manners of HTML and styling including hyperlinks, images, etc.
I’ve basically accomplished this by writing about 200 lines of ugly JavaScript but I would really like to find a jQuery plugin or some other way to clean this up a bit.

Solutions/Answers:

Solution 1:

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.

Solution 2:

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

Solution 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)

Solution 4:

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>

Solution 5:

I have programmed an useful jQuery Plugin to create easily smart bubble popups with only a line of code in jQuery!

What You can do:
– attach popups to any DOM element!
– mouseover/mouseout events automatically managed!
– set custom popups events!
– create smart shadowed popups! (in IE too!)
– choose popup’s style templates at runtime!
– insert HTML messages inside popups!
– set many options as: distances, velocity, delays, colors…

Popup’s shadows and colorized templates are fully supported by
Internet Explorer 6+, Firefox, Opera 9+, Safari

You can download sources from
http://plugins.jquery.com/project/jqBubblePopup

Solution 6:

QTip has bug with jQuery 1.4.2. I had to switch to jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples and it works great!