Search code examples
javascriptjqueryqtip2dajax

How to "reset" click event (with qtip2)?


I have a little question about the click event and qtip2.

After the first click on element $j('a[href^="/i/"]'), when I move again over it, the bubble appears. I would like that the bubble appears everytime I click on the element.

My code:

$j('a[href^="/i/"]').click(function(event) { 
        event.preventDefault(); 
        $j(this).qtip({
            content: {
                title: {
                    text: title_qtip,
                    button: true,
                },
                text: text_qtip,                
            },
            show: { 
                //  event: false,   <-- doesn't work
                solo: true,
                ready: true 
            },
            hide: false,
        });   
       // $j('a[href^="/i/"]').unbind('click');    <-- doesn't work
       // $j('a[href^="/i/"]').unbind('onmouseover').unbind('onmouseout');   <-- doesn't work
});

Solution

  • First of all, don't declare your qTip2 function inside of an event handler. You don't want to declare a new qTip every time the object is clicked. All you have to do is change the event line in the show function. It should be:

    $j(document).ready(function(){
    
         $j('//selector').qtip({
            content: {
                title: {
                    text: title_qtip,
                    button: true,
                },
                text: text_qtip,                
            },
            show: { 
                event: 'click',   
                solo: true,
                ready: true 
            },
            hide: false,
        });   
    }
    

    This will trigger the tool tip when the selector ($j(//your selector)) is clicked on.

    Here is an updated fiddle: http://jsfiddle.net/LJwLh/1101/

    It seem that your problem is the use of an a tag. There is no reason to use that tag if you are not going to link to anything.