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");
      }
   }
});

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

1 个答案: