0

我是一个老（大约 2008 年）的 Flash 人，更多的是设计师而不是程序员。好几年没编程了。

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

在 Tooltipster 主页上，有关于使用 ajax 加载的信息，但我不太明白。

简单来说，如何将以下代码转换为 ajax-load 实例？如前所述，一个页面上可能有很多这样的内容。例如，我想 demo-interact 需要是一个 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

任何帮助，将不胜感激：）

肖恩

4

3 回答 3

2

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

尝试使用此示例。它的工作并不是因为 XHS 限制，也不是因为这被称为。

$('#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');
        }
      });
    }
  }

});
<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>

如果对我的发布风格有一些优化，请随时发表评论。

于 2016-09-13T20:51:35.513 回答
1

如果我理解正确，您的问题是工具提示未显示在 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
});
于 2015-02-20T23:07:55.520 回答
0

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

于 2015-02-21T00:11:45.060 回答