1

使用jQuery UI ToolTip 插件，如何一次显示多个 ToolTips？

我最多显示两个工具提示的原因是因为我有一个字段的信息性消息，并且可能还有该字段的错误消息。

当前的HTML如下：

<li title="This is an informational ToolTip message">
  <input type="text" class="error" title="This is an error ToolTip message">
</li>

当前的 JavaScript：

$('body').tooltip({
  track: true
});
$('body').tooltip({
  items: '.error',
  position: {my: 'left bottom-15', at: 'left top', collision: 'flipfit'},
  track: true
});

当前的问题是，当输入 时<li>，信息性工具提示正确显示，但是当鼠标进入该字段本身时，信息性工具提示会淡出，并且仅显示错误工具提示。我需要同时显示两者。

4

3 回答 3

4

我强迫你的问题工作。但它太丑了。我不建议你这样做。但给出你的想法。

这个想法是使用一个工具提示打开/关闭事件以编程方式控制其他工具提示。

请看 jsfiddle 示例：<a href="http://jsfiddle.net/3RyPg/" rel="nofollow">jsfiddle

   $('li').tooltip({
  track: true,
    open: function( event, ui ) {
      $('input').tooltip('open');
  },
    close: function( event, ui ) {
      $('input').tooltip('close');
  }
});
$('input').tooltip({
  items: '.error',
  position: {my: 'left bottom-15', at: 'left top', collision: 'flipfit'},
  track: true,
  open: function( event, ui ) {
      $('li').tooltip('open');
  },
    close: function( event, ui ) {
      $('li').tooltip('close');
  }

});
于 2013-07-16T14:40:35.197 回答
0

如果是我...我只会在错误工具提示内容的底部包含第一个工具提示中的文本...

var i="this is INFO tooltip text"

Tooltip 1 = i

Tooltip 2 = "Error text" + i

对不起，不能给你真正的代码，因为我不使用 jquery - 只是 javascript，但无论如何应该足够简单......

于 2013-07-22T14:14:39.017 回答
-1

您应该将 preventDefault() 应用于 li 元素的 OnOver 侦听器。

于 2013-07-15T16:05:06.183 回答