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

Tooltip shows the same message for different element

本文关键字：消息 显示 元素 工具提示      更新时间：2023-09-26

我在我的应用程序中使用jQueryUI工具提示。这个工具提示在除ie11以外的所有浏览器上都能正常工作。如果在IE11中使用了"选择"，则下拉菜单自动关闭。为此，我找到了这个链接来解决这个问题。如果我们使用多个元素(例如:两个选择和一个文本字段)，它总是显示从第一个customtooltip获取的消息。

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

$(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.">

问题就在这里:

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

它获取具有指定选择器的所有元素，并尝试获取data属性。

尝试在这里使用function:

$(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.">

相关文章：