2

我的表单中几乎没有输入和选择控件，每个控件前面都有一个小问号图标，当鼠标悬停在该 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 块代码工作正常，我可以添加两者来实现我的目标，但我想以正确的方式做。
如何定位多个目标的事件以显示单个工具提示？

4

1 回答 1

3

您不必将调用中的所有显示/隐藏事件连接到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/

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

希望有帮助。

于 2011-01-02T21:59:44.473 回答