jQuery ui 带有内容功能的工具提示（url 来自数据属性）

Question

我不知道如何让我的工具提示工作（jQuery UI 工具提示），使用 content 选项的函数。

我使用 these examples from tutorialspoint.com 作为起点，这对我有用；其中一个我保存为文件，由没有服务器的浏览器调用，效果也很好。但是没有例子说明content选项是一个函数，所以我自己试了一下

这是我目前拥有的：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <base url="." target="_self">
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script type="text/javascript">
         $(document).ready(function() {
            $(document).tooltip({
                items: '.tooltip',  // a CSS selector, right?
                content: function(callback) {
                    var tooltip_url = './' + $(this).data('tooltipsrc');
                    console.log(tooltip_url);
                    $.get(tooltip_url, {},
                          function(data) {
                              callback(data);
                          });
                }  // ... content option
            });  // ... tooltip
         });  // ... document ready
      </script>
   </head>
   <body>
      <!-- HTML -->
      <p>
         <span data-tooltipsrc="snippet1.html"
               class="tooltip"
               title="ignored">
            Tooltip text from <a href="snippet1.html">snippet1.html</a>
         </span>
      </p>
   </body>
</html>

这是snippet1.html的内容（我试过先不带html和body，但是没有区别）：

    <!DOCTYPE HTML>
    <html>
    <body>
    <h1>Snippet 1</h1>
    <p>Tooltip text from <tt>snippet1.html</tt></p>
    </body>
    </html>

然而，我看到 console.log 触发（在我的一次尝试中），但我从未看到 snippet1.html 的内容在使用；我得到的最好的是一个空的工具提示。

我已经用修改后的示例测试了 $(document).ready 部分，其中静态 html 用于 content；这有效。

我试过各种

$.get(tooltip_url);
$.get(tooltip_url, response);
$.get(tooltip_url, {}, response);
return $.get(tooltip_url, {}, response);
return $.get(tooltip_url);

...最后放弃了

我做错了什么？谢谢！

Answer 1

您需要在服务器上进行检查。如果您在本地尝试代码，它将不起作用。根据 get() 的 jQuery 文档 使用 HTTP GET 请求从服务器加载数据。 :)

PS：很高兴我能提供帮助:)

jQuery ui 带有内容功能的工具提示（url 来自数据属性）

jQuery ui tooltip with content function (url from data attribute)

jquery

jquery-ui

jquery-ui-tooltip