Have Geek Brain

JQuery Cluetip not firing until hover or click event occurs

I'm not sure what is causing this, but I use cluetip and bind it to a live event (click or mouse), but in every situation the cluetip doesn't fire until one click or hover event occurs. I am using live event for loaded ajax content, but I also have this issue with loaded non-Ajax content. I don't know 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;
        });
+2


a source to share


5 answers


Good, because you don't set it up until the first event. In other words, you are handling the event (obviously) and you have set up the object in the handler. This particular event will not trigger cluetip code.



Instead, you might consider making sure that your code that dynamically adds content always calls the "cluetip" setting directly, or investigates the LiveQuery plugin to do "automatic" work on DOM changes. Personally, I would go with the old approach, but a lot of people seem to be using LiveQuery with good results.

+2


a source


You can use a livequery()

plugin for this, it will look like this:

$('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()

not completely replaced .livequery()

, it behaves differently. If you still want to search for current and new elements that match the selector, the better way is .livequery()

or binding as part of an ajax callback (in your success, for example $('a.jTip', data)

).

+2


a source


As the cluetip is not initialized until 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 the cluetip will be initialized multiple times, so what 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();
    });
+1


a source


You are binding the cluetip to the event click

. This is why it binds to the cluetip after the clip. Remove the click from the posted code and it should work fine.

0


a source


The function cluetip

modifies the element to give it a tooltip. Your code only performs this modification when the user clicks on the element. You want this to happen when the item has been loaded, not when it is clicked.

You seem to be under the impression that the function is cluetip

indeed pop-up tooltip, so you need to include it in your element handler click

. This is not true. The function sets the element as a tooltip and it takes care of the click / mouse handling itself.

0


a source






More articles:


All Articles