使用数据属性添加工具提示但不显示

Answer 1

jQuery 工具提示 的文档说它将在应用它的元素的

title

属性中显示文本。您的示例中的元素没有

title

属性，因此没有任何内容可显示。这就是为什么你的工具提示没有出现。

在下面的例子中，我在你的

title

元素中添加了一个

<input>

，所以现在当你悬停时工具提示会出现。

$(document).ready(function() {
  $(".checktip :checked").tooltip({
    "classes": {
      "ui-tooltip": "uitooltip"
    },
    "content": $(this).data("office")
  });

  $(".checktip").tooltip({
    "classes": {
      "ui-tooltip": "uitooltip"
    },
    "content": $(this).data("home")
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Monday" id="Monday" title="Here's your tooltip!">
<label for="Monday">Hover over the input to show a tooltip</label>

如果您想以编程方式更改标题，可以使用 jQuery

.attr("title", "new value you want")

函数。