Question

按照jQuery UI API的工具提示教程，我尝试使用自定义html内容创建工具提示，但没有显示任何内容。控制台显示我的脚本没有错误，只有一些来自jQuery-UI（但没什么特别的）。

有谁能告诉我我做错了什么？

＆＃13;

$(document).ready(function() {
  $(function() {
    $(document).tooltip({
      items: "custom-tooltip",
      content: function() {
        var element = $(this);
        if (element.is("custom-tooltip")) {
          return "<a>THIS<br/>IS<br/><A><br/>TOOLTIP!";
        }
      }
    });
  });
});

＆＃13;

<!doctype html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>CUSTOM TOOLTIPS</title>

  <link rel="stylesheet" href="jquery-ui.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>

  <script src="tooltips.js"></script>

</head>

<body>

  <h3><a href="#" custom-tooltip="">HOVER ME</a></h3>

</body>

</html>

＆＃13;

Answer 1

.is函数需要一个选择器。要匹配属性（如果存在），请将其括在方括号[]：

中

    if (element.is("[custom-tooltip]")) {

与items选项相同：

     items: "[custom-tooltip]",

其余代码看起来很好。请注意，您可能根本不需要进行if检查，因为items已将小部件限制为相同的标记。

有关有效选择器的更多信息，请参阅文档页面：http://api.jquery.com/category/selectors/

Answer 2

见JSFiddle。你在工具提示设置中犯了一些错误。工具提示项目设置应如下所示：items: "[custom-tooltip]" 以及为什么以这种方式调用记录就绪函数

$(document).ready(function() { -- document ready event
  $(function() { -- same document ready
    $(document).tooltip(...);
  });
});

jQuery代码就像：

$(function() {
    $(document).tooltip({
      items: "[custom-tooltip]",
      content: function() {
        var element = $(this);
        if (element.is("[custom-tooltip]")) {
          return "<a>THIS<br/>IS<br/><A><br/>TOOLTIP!";
        }
      }
    });
 });

jQuery自定义内容工具提示没有显示任何内容

2 个答案: