Question

I am using the jquery qtip tooltip on multiple elements (images) on a page. I am trying to have only one tooltip appear on the page at a particular time. If a tooltip is shown and another tooltip has been triggered to open, the currently open instance should close. I have found this in the documentation and have set solo: true however multiple instances of the tooltip are still appearing ont the page. Here is my jquery:

<script type="text/javascript">
        $(document).ready(function () {

            //****** tooltips **********
            $('img.help').hover(function () {

          // Destroy currrent tooltip if present
          //if ($(this).data("qtip")) $(this).qtip("destroy");

          $(this) // Set the links HTML to the current opposite corner
            .qtip({
                content: 
                {
                    text: 'this is the tooltip, better to use the alt attribute of the image or use html div content somewhere on the page', 
                        title: {
                        text: 'This toolip title',
                        button: 'Close'
                        }
                },
                position: {
                    corner: {
                        tooltip: 'bottomLeft', // Use the corner...
                        target: 'topRight' // ...and opposite corner
                    }
                },
                show: {
                    solo: true,
                    when: false, // Don't specify a show event
                    ready: true // Show the tooltip when ready
                },
                hide: false, // Don't specify a hide event
                style: {
                    border: {
                        width: 5,
                        radius: 10
                    },
                    padding: 10,
                    textAlign: 'left',
                    tip: true, // Give it a speech bubble tip with automatic corner detection
                    name: 'blue' // Style it according to the preset 'cream' style
                    // name: 'light' // Style it according to the preset 'cream' style
                }
            });


      });

});

html:

<div>
                    <div class="left sublabel">
                        Parameds</div>
                    <div class="left help">
                        <img src="images/help.png" class="help" /></div>
                    <div class="clear">
                    </div>
                </div>
                <div>
                    <div class="left sublabel">
                        Vision</div>
                    <div class="left help">
                        <img src="images/help.png" class="help" /></div>
                    <div class="clear">
                    </div>
                </div>

Answer 1

My guess as to why they are still showing even though you have solo set to true is because all the instances of the qtip have the same class. I have always had different class names on my qtips instances when dealing with multiple tooltips on the same page and that way has worked for me.

If that doesn’t work for some reason you could try hiding all the tooltips in the beforeShow api method.

$('#tooltip').qtip({
   ...
   api: {
      beforeShow: function() {
         $('img.help').qtip("hide");
      }
   }
});