2

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
});
enri
  • 552
  • 1
  • 6
  • 10

1 Answers1

1

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.

RestingRobot
  • 2,938
  • 1
  • 23
  • 36
  • Thanks, I tried but when I click on link the default event starts and doesn't trigger the tool tip. – enri Aug 07 '12 at 09:31
  • Nowhere in your code are you defining a default event? Are you talking about the `a` tag? If you do not want the tag to trigger, try using a span instead. – RestingRobot Aug 07 '12 at 15:59
  • Thanks! I understood the incongruity! I solved using a class `$j('.sc_box_l[data-full="true"]')` instead of `$j('a[href^="/i/"]')` and I removed the `a` from the element (is no longer necessary). Now I'm looking to insert an element value in content; it's possible? Something likes `text: '

    Value: '+ $j(this).siblings(".value").html() +'

    '`     – enri Aug 07 '12 at 18:13
  • 1
    Here is an updated fiddle http://jsfiddle.net/LJwLh/1102/. I don't think you'll have access to `this` so you'll have to use a selector. But you should test it out, as I can't remember. – RestingRobot Aug 07 '12 at 18:31
  • I tried duplicating [link](http://jsfiddle.net/7hKze/2/) and when there are more elements of the same class (it's my case), captures the first (I imagined it). I also tried with `this` but searching on Web ([eg](http://craigsworks.com/projects/forums/thread-solved-pass-variable-to-content-url)) I discovered that to refer the current element I need to encapsulate the qtip call. I finally solved the initial 'click' problem: [here](http://jsfiddle.net/jwwDG/1/) and I put it in the `$j(document).ready(function()`. Many thanks for the help!! :-) – enri Aug 07 '12 at 22:48