Question

我在我的应用程序中使用jQueryUI工具提示。工具提示适用于所有浏览器，除了一个案例的ie11。如果选择在IE11下拉菜单中自动关闭。为此，我找到了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：

＆＃13;

$(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);
      }
    }
  });
});

＆＃13;

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

＆＃13;

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

1 个答案: