CODEWITHSUNDEEP
javascripthtmljqueryjquery-eventsqtip
kamikaze_pilot
kamikaze_pilot

Reputation: 14834

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?

Upvotes: 1

Views: 2171

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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.

Upvotes: 1

Related Questions