一次显示两个 jQuery UI 工具提示答案

【问题标题】：Show two jQuery UI ToolTips at once一次显示两个 jQuery UI 工具提示
【发布时间】：2013-07-22 22:14:39
【问题描述】：

使用jQuery UI ToolTip plug-in，如何一次显示多个工具提示？

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

目前的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>时，信息性工具提示正确显示，但是当鼠标进入该字段本身时，信息性工具提示淡出，仅显示错误工具提示。我需要同时显示两者。

【问题讨论】：

这引发了可用性的危险信号。错误应该是可访问的，并且它们不会出现在工具提示中。你确定要走这条路吗？如果是这样，我会使用 jQuery 在单个工具提示中附加第二条消息。
它被称为工具提示而不是工具提示是有原因的。如果还想实现，不如写个小插件？
为什么首先需要 2 个工具提示？您不能将多个提示/说明放在一个工具提示中吗？
我可能同意一次拥有两个工具提示并不理想，尽管我认为它在这里可以工作（用户可以将鼠标悬停在红色标记的错误字段上以查看错误的详细信息，同时查看信息性消息也）。 但这不是问题。
你能提供你当前的代码吗？

标签： javascript jquery jquery-ui jquery-plugins jquery-ui-tooltip

【解决方案1】：

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

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

请看jsfiddle示例：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');
  }

});

【讨论】：

【解决方案2】：

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

var i="this is INFO tooltip text"

Tooltip 1 = i

Tooltip 2 = "Error text" + i

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

【讨论】：

【解决方案3】：

你应该将 preventDefault() 应用到 li 元素的 OnOver 监听器中。

【讨论】：