How do you rebind jQueryUI tooltip?

Question

I am using jQueryUI tooltip on one of my page.

        $('.sourceItem').hover(function () {
            $(this).find('.tooltip').show();
            $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
        });

        $('.sourceItem').mouseleave(function () {
            $('.tooltip').hide();
        });

here my html code:

    <div id="sourceBoxInner">
                <div class="sourceItem" id="9003">
                    <img src="/Pictures/Fruit/apple.png" alt="apple w/ skin, raw"/><br />
                    <a href="#" class="linkToolTip" title="apple w/ skin, raw">apple w/ skin, raw</a>
                    <div class="tooltip">
                        <div class="arrow">
                            ▲</div>
                        <div class="text">apple w/ skin, raw<br /> 09003<br /> </div>
                    </div>
                </div>
                <div class="sourceItem" id="9004">
                    <img src="/Pictures/Fruit/apple.png" alt="apple w/out skin, raw"/><br />
                    <a href="#" class="linkToolTip" title="apple w/out skin, raw">apple w/out skin, raw</a>
                    <div class="tooltip">
                        <div class="arrow">
                            ▲</div>
                        <div class="text">apple w/out skin, raw<br /> 09004<br /> </div>
                    </div>
                </div>
    </div>

So far, everything works, I can see the tooltip, when I hover on it.

Now, I make an ajax call to repopulate "sourceBoxInner" div. The tooltip stops working. I think I need to rebind it. so in the ajax OnSuccess method, I add following code again. but still does not work.

    function OnSuccess() {

        $('.sourceItem').hover(function () {
            $(this).find('.tooltip').show();
            $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
        });

        $('.sourceItem').mouseleave(function () {
            $('.tooltip').hide();
        });

    }

Updates:

I also tried following code, still not working.

    function OnSuccess() {


        $(".sourceItem").unbind("hover").hover(function () {

            $(this).find('.tooltip').show();
            $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });

        });

    }

score 3 · Accepted Answer · answered Oct 18 '12 at 01:25

3

You can try this

$(document).on('mouseenter', '.sourceItem', function(){
    $(this).find('.tooltip').show();
    $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
}).on('mouseleave', '.sourceItem', function(){
    $('.tooltip').hide();
});

answered Oct 18 '12 at 01:25

The Alpha

143,660
29
287
307

still couldn't get it work. I first try to put your code in the "OnSuccess" function. its not working, then move it outside the OnSuccess, still not working. – qinking126 Oct 18 '12 at 01:56
This code should be placed in the `ready` event and make sure you are using a version that supports `on`. – The Alpha Oct 18 '12 at 01:58
still not working. is this Rebinding supposed to be called from the OnSuccess function? – qinking126 Oct 18 '12 at 02:01
You don't need to use/rebind it because you are using delegated way. Check [this example](http://jsfiddle.net/MCPqK/), wait 5 seconds and then some new content will be inserted into the `dom`, works fine. – The Alpha Oct 18 '12 at 02:10
@feelexit, you can also change the `$(document)` with `$("#sourceBoxInner")` if this is the parent of all of your `.sourceItem`. – The Alpha Oct 18 '12 at 02:15
thank you so much, finally get it work. it is a small typo on my end. – qinking126 Oct 18 '12 at 02:48

kmfk · Answer 2 · 2012-10-18T01:36:04.533

You can either rebind as you suggest, or use either .live() if you have an older version of jQuery ( now deprecated ), or .on(), which would be preferred.

$(document).on({
    hover: function () {
        $(this).find('.tooltip').show();
        $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
    },
    mouseleave: function () {
            $('.tooltip').hide();
    }
},'.sourceItem');

edit: had to fix my selector

How do you rebind jQueryUI tooltip?

2 Answers2