Question

我无法弄清楚如何使用content选项的函数来使我的工具提示工作（jQuery UI工具提示）。

我用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和正文的情况下尝试了它，但没有区别）：

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

1 个答案: