javascript - 一次显示两个 jQuery UI 工具提示

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

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

最佳答案

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

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

请看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');
  }

});

关于javascript - 一次显示两个 jQuery UI 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17623296/

相关文章:

javascript - 通过 Node.js 传输命令的输入和输出

javascript - JS While 确保数字不能再被整除

javascript - JavaScript 中变量的大小

jquery - 如何使父宽度等于其中所有元素的宽度?

javascript - 如何获取触发弹出窗口的 JavaScript 代码?

javascript - 向 jqGrid 添加下拉菜单

javascript - 如何找到创建对象的变量名称?

javascript - 前置所有 CSS 选择器

javascript - 从javascript生成的文本中删除点

javascript - Jquery UI 附加不工作