Question

我的表单中几乎没有输入和选择控件，每个控件都在它们前面有一个小问号图标，当鼠标在gif jquery.qtip-1.0的帮助下鼠标悬停在gif上时会显示工具提示。 0-rc3.js（带jquery-1.3.2.min.js）插件如下：

   $('#questionmark1').qtip({
        content: 'sample help content'
        , style: { name: 'sampleStyle' }
        , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
    });

我还希望在相应的输入字段聚焦时显示工具提示，并在模糊时隐藏。下面的一个做了诀窍，但是当鼠标悬停在那个gif上时没有显示工具提示

  $('#questionmark1').qtip({
        content: 'sample help content'
        , style: { name: 'sampleStyle' }
        , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
         , show: { when: { target: $('#input1'), event: 'focus'} }
        , hide: { when: { target: $('#input1'), event: 'blur'} }
    });

但问题是像这样的东西不起作用。

  show: { when: { target: $('#input1'), event: 'focus'},
                { target: $('#questionmark1'), event: 'focus'} }

简而言之前面的前两个代码块工作正常，我可以添加两个来实现我的目标，但我想以正确的方式做到这一点。
如何针对显示单个工具提示的多个目标事件进行定位？

Answer 1

您不必将调用内的所有显示/隐藏事件连接到qtip()。我将mouseover事件定义为默认触发qtip的事件：

$('#questionmark1').qtip({
      content: {text:'sample help content', prerender: true}
      , style: { name: 'sampleStyle' }
      , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
      , show: { when: 'mouseover' }
  });

（注意我添加的预渲染选项）

然后为要显示qtip的输入手动定义事件处理程序：

$("#input1").bind("focusin", function() {
    $("#questionmark1").qtip("show");
}).bind("blur", function() {
    $("#" + this.id + "-tip").qtip("hide");
});

请在此处查看示例：http://jsfiddle.net/andrewwhitaker/wCgAM/

唯一奇怪的是，您可以通过聚焦第一个输入然后将鼠标悬停在第二个问号上来显示两个工具提示。这可能很容易解决。

希望有所帮助。

当触发不同目标的不同事件时，显示单个qtip？

1 个答案: