javascripthtmljqueryjquery-eventsqtip

How to keep qtip fixed


I'm using qtip for jQuery, and I have the following code

$('#content a[href]').qtip(
   {
      content: 'Some basic content for the tooltip', // Give it some content, in this case a simple string
       style: { 
      name: 'cream', // Inherit from preset style
      tip: 'topLeft'
      },
      show: {
            when: 'click', // Show it on click...
            solo: true // ...and hide all others when its shown
      },
      hide: {
          when : 'focusout',
          fixed: true
      }
   });

The desired effect is that the tip should display when I click on the link and stay there unless if I click on some other part of the page (hence the focusout), but at the same time if I click on the tip itself, I don't want it to disappear so that I can insert interesting stuff in it, hence the fixed: true... but then even when I do this it would still disappear when I click on the tip... what am I doing wrong or is there another way to prevent the tip from disappearing when I click on it but have it disappear if I click on another part of the page?


Solution

  • You need to use the unfocus event:

    $('#content a[href]').qtip({
        content: 'Some basic content for the tooltip',
        // Give it some content, in this case a simple string
        style: {
            name: 'cream',
            // Inherit from preset style
            tip: 'topLeft'
        },
        show: {
            when: 'click',
            // Show it on click...
            solo: true // ...and hide all others when its shown
        },
        hide: {
             when: { event: 'unfocus' }
        }
    });
    

    Working demo: http://jsfiddle.net/andrewwhitaker/rep87/

    From the documentation:

    The 'unfocus' event hides the tooltip when anywhere else on the document, except the tooltip itself, is clicked.