jquery-plugins - 触发不同目标的不同事件时显示单个 qtip？

Question

我的表单中几乎没有输入和选择控件，每个控件前面都有一个小问号图标，当鼠标悬停在该 gif 上时，将在出色的 jquery jquery.qtip-1.0.0-rc3 的帮助下显示工具提示.js(with 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'} }

简而言之，前面的前 2 block 代码工作正常，我可以添加两者来实现我的目标，但我想以正确的方式做。
如何定位多个目标的事件以显示单个工具提示？

Answer 1

您不必将调用中的所有显示/隐藏事件都连接到 qtip()。 .我会定义 mouseover event 作为默认触发 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/

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

希望有帮助。