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

Question

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

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

希望有帮助。