javascript - 工具提示显示不同元素的相同消息

Question

我在我的应用程序中使用 jQueryUI 工具提示。工具提示适用于所有浏览器，但 ie11 除外。如果在 IE11 中使用 select，下拉菜单会自动关闭。为此，我找到了 This链接来解决这个问题。它非常适合一个元素，如果我们使用多个元素(例如，两个选择和一个文本字段)，它总是显示从第一个自定义工具提示获取的消息。

我怎样才能做到这一点？这是下面的代码片段。你可以检查

$(function() {
  $("[data-tooltip-open=true]").tooltip({
    items: "[data-content=true]",
    content: $("[data-tooltip-open=true]").data('customtooltip'),
    position: {
      my: "center bottom-20",
      at: "center top",
      using: function(position, feedback) {
        $(this).css(position);
        $("<div>")
        .addClass("arrow")
        .addClass(feedback.vertical)
        .addClass(feedback.horizontal)
        .appendTo(this);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<select name="test" data-tooltip-open="true" data-content="true" data-customtooltip="First tooltip message.">
  <option value=""></option>
  <option value=" "></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select name="test" data-tooltip-open="true" data-content="true" data-customtooltip="Second tooltip message.">
  <option value=""></option>
  <option value=" "></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<input data-tooltip-open="true" data-content="true" data-customtooltip="Third tooltip message.">

Answer 1

问题出在这里:

content: $("[data-tooltip-open=true]").data('customtooltip'),

它获取具有指定选择器的所有元素并尝试获取 data 属性。只要有多个，就取第一个。

尝试在此处使用函数:

$(function() {
  $("[data-tooltip-open=true]").tooltip({
    items: "[data-content=true]",
    content: function(){ return $(this).data('customtooltip') },
    position: {
      my: "center bottom-20",
      at: "center top",
      using: function(position, feedback) {
        $(this).css(position);
        $("<div>")
        .addClass("arrow")
        .addClass(feedback.vertical)
        .addClass(feedback.horizontal)
        .appendTo(this);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<select name="test" data-tooltip-open="true" data-content="true" data-customtooltip="First tooltip message.">
  <option value=""></option>
  <option value=" "></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select name="test" data-tooltip-open="true" data-content="true" data-customtooltip="Second tooltip message.">
  <option value=""></option>
  <option value=" "></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<input data-tooltip-open="true" data-content="true" data-customtooltip="Third tooltip message.">