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

Question

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

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

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

<!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>

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 自定义内容工具提示不显示任何内容

jQuery custom content tooltip shows nothing

jquery

jquery-ui

jquery-ui-tooltip