jquery - 使用 qtip jquery 工具提示插件时，屏幕上只有一个工具提示处于事件状态

Question

我在页面上的多个元素(图像)上使用 jquery qtip 工具提示。我试图在特定时间仅在页面上显示一个工具提示。如果显示一个工具提示并且已触发另一个工具提示打开，则当前打开的实例应关闭。 I have found this in the documentation and have set solo: true但是，页面上仍然出现工具提示的多个实例。这是我的 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

我的猜测是，即使您将solo设置为true，它们仍然显示的原因是因为qtip的所有实例都具有相同的类。在处理同一页面上的多个工具提示时，我的 qtips 实例上总是有不同的类名，这种方式对我很有效。

如果由于某种原因这不起作用，您可以尝试隐藏 beforeShow api 方法中的所有工具提示。

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