Question

我是一个老的（大约2008年）Flash家伙，比程序员更多的设计师。多年来，Haven没有编程。

我试图在我构建的网站上实现Tooltipster（它只是一种html / jQuery），只有一种用法，但我需要能够加载内容按需，这样我就不会有巨大的初始负载......单个页面上会有很多数十个;即一个工具提示，您可以单击链接，并具有图像和文本（以及其他任何html），并且在您移出内容区域之前不会消失。

在Tooltipster主页上，有关于加载ajax的信息，但我不太了解它。

简单来说，如何将以下代码转换为ajax-load实例？如上所述，在一个页面上可能有许多这些。例如，我认为演示互动需要是一个html页面，所有其他实例也是如此，但我已经离开了我的联盟：

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>      <a href="#"><span id="demo-interact" 
                                title="Try clicking 
                                    &lt;a href='http://google.com/' target='_blank'&gt;
                                        this link
                                    &lt;/a&gt;

                                    &lt;strong&gt;
                                        This text is in bold case!
                                    &lt;/strong&gt;

                                    &lt;img src='spiderman.png'/&gt;
                            ">This</span></a> will hover until you move away from the tooltip itself, i.e. it's clickable</td>
    <td>&nbsp;</td>
  </tr>
</table>

在项目的主页上，它显示了如何使用ajax加载html文件，但正如我所说，它有点超出我的意义。我假设包含标签需要一个ID，并且该ID将被传递到函数而不是example.php（下面）,,,或类似的东西？

$('.tooltip').tooltipster({
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {

        // we'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();

        // next, we want to check if our data has already been cached
        if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'POST',
                url: 'example.php',
                success: function(data) {
                    // update our tooltip content with our returned data and cache it
                    origin.tooltipster('content', data).data('ajax', 'cached');
                }
            });
        }
    }
});

这一切都来自这里：http://iamceege.github.io/tooltipster/#demos

任何帮助将不胜感激：）

肖恩

Answer 1

我知道这个问题很老，但我找到了一个有效的例子，因为我在这里遇到了同样的问题。

尝试使用此示例。它的工作原理并不是因为XHS的限制，或者这就是所谓的。

＆＃13;

$('#test').tooltipster({
  content: 'Loading...',
  contentAsHTML: true,
  /*optional - I used it in my case*/
  functionBefore: function(origin, continueTooltip) {

    continueTooltip();

    if (origin.data('ajax') !== 'cached') {
      $.ajax({
        type: 'POST',
        url: 'http://evolution.uni-giessen.de:8080/example/example.php',
        data: {
          somevar: "some content"
        },
        success: function(data) {
          origin.tooltipster('update', data).data('ajax ', 'cached');
        }
      });
    }
  }

});

＆＃13;

<link href="http://evolution.uni-giessen.de:8080/example/tooltipster.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://evolution.uni-giessen.de:8080/example/jquery.tooltipster.js"></script>


<a id="test" title="a title">ein Test</a>

＆＃13;

如果对我的发布方式有一些优化，请随时对其进行评论。

Answer 2

如果我理解正确，你的问题是工具提示没有显示在ajax加载的内容中，对吗？如果是这样，你需要在所述ajax回调中初始化tooltipster。

例如，您只需使用$('.tooltip').tooltipster();即可完成所有工作，但如果您正在进行ajax调用，请执行以下操作：

$.ajax({
    url: '/url/goes/here',
    ...
}).done(function() {
    // this is the callback, you can initialize tooltipster here
    $('.tooltip').tooltipster();

    // and now it should work with the ajax loaded stuff as well
});

Answer 3

我不知道工具提示，但Asko的答案看起来似乎有道理。但另一件事：$('.tooltip')是一个jQuery对象，表示具有CSS类tooltip的所有HTML元素，但我没有在HTML中看到任何这样的元素。也许你打算做$('#demo-interact') - 这将代表<span id="demo-interact">元素。（$接受CSS选择器作为参数。）

使用ajax与这个jQuery插件（Tooltipster）

3 个答案: