jQuery Cluetip not activated until after hover or click event

Question

I'm not sure what is causing this, but I am using cluetip and binding it to a live event (either click or mouseenter), but in each situation the cluetip isn't firing until after one click or hover event. I am using the live event for ajax loaded content, but I'm also having this issue with non-Ajax loaded content. I'm not sure why this is happening - can anyone see where I might be going wrong? Many thanks.

$("a.jTip").live("click", function(){
            $('a.jTip').cluetip({
                attribute: 'href',
                cluetipClass: 'jtip',
                arrows: true,
                activation: 'click',
                ajaxCache: false,
                dropShadow: true,
                sticky: true,
                mouseOutClose: false,
                closePosition: 'title'
            })
            return false;
        });

Answer 1

You are binding the cluetip on click event. Thats the reason it is binding to cluetip after a clip. Remove the click from the posted code and it should just work fine.

Answer 2

Because cluetip isn't initialized until after the first click.

Try:

    $("a.jTip").live("mousedown", function(event){
        $('a.jTip').cluetip({
            attribute: 'href',
            cluetipClass: 'jtip',
            arrows: true,
            activation: 'click',
            ajaxCache: false,
            dropShadow: true,
            sticky: true,
            mouseOutClose: false,
            closePosition: 'title'
        })

        event.preventDefault();
    });

Although cluetip is going to be initialized multiple times, so how about:

    $("a.jTip").live("mousedown", function(event){
        var self = $(this);

        if (!self.data('cluetip-initd')) {
          self.cluetip({
              attribute: 'href',
              cluetipClass: 'jtip',
              arrows: true,
              activation: 'click',
              ajaxCache: false,
              dropShadow: true,
              sticky: true,
              mouseOutClose: false,
              closePosition: 'title'
          }).data('cluetip-initd', true);
        };

        event.preventDefault();
    });

Answer 3

The cluetip function modifies an element to give it tooltip behavior. Your code only performs that modification when the user clicks on the element. You want that to happen when the element is loaded, not when it's clicked.

You seem to be under the impression that the cluetip function actually makes the tooltip pop up, and therefore you need to include it in the element's click handler. That's not the case. The function sets up the element to be a tooltip, and it takes care of the click/mouseover handling itself.

Answer 4

Well that's because you're not setting it up until after the first event. In other words, you're handling the event (obviously) and you set up the facility in the handler. That particular event is not going to trigger the cluetip code.

Instead of doing that, you might consider either making sure your code that dynamically adds content always calls the "cluetip" setup directly, or else investigate the "LiveQuery" plugin to do "automatic" work upon DOM changes. Personally I'd go with the former approach, but lots of people apparently use LiveQuery with good results.

Answer 5

You can still use the livequery() plugin for this, this is what it would look like:

$('a.jTip').livequery(function() {
  $(this).cluetip({
    attribute: 'href',
    cluetipClass: 'jtip',
    arrows: true,
    activation: 'click',
    ajaxCache: false,
    dropShadow: true,
    sticky: true,
    mouseOutClose: false,
    closePosition: 'title'
  });
});

.live() didn't completely replace .livequery(), it behaves in a different way. If you still want to look for current and new elements that match a selector, .livequery() or binding as part of the ajax callback (e.g. in your success like $('a.jTip', data)) is the best route.