jquery - 如何在粘性时从 ajax 回调设置线索提示工具提示的标题：true？

Question

我正在使用很棒的线索提示插件。我正在使用 Ajax 填充插件，但我无法在任何地方（在文档或示例中）了解如何从 ajax 回调设置标题。

提示提示中是否支持从 ajax 更新标题？

更新说明：

因此，下面给出的建议可以创建标题，但在这种情况下，关闭按钮不会显示在标题中。见下图。

Answer 1

其实，如果从一个简单的角度来看，这很容易。

首先要注意的是，文档中的所有线索提示，仅使用一个标记布局来显示所有提示。每次触发新的线索提示时，它只会更新其标记布局并显示它。

让我们看一个如何解决您正在尝试的示例

---

我为此使用了演示。所以加价是：

_{注意：我使用两个线索提示来模拟具有多个线索提示的案例}

<a class="title" title="hello" href="http://plugins.learningjquery.com/cluetip/demo/ajax3.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax3.html">This example</a>

<a class="basic" href="http://plugins.learningjquery.com/cluetip/demo/ajax.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax.html">Basic</a>

让我们对样式进行一些小的更改，以便正确对齐

.cluetip-close { float: right; margin-top: -40px; }

现在，我们的脚本，用于两个线索提示。

  var title;
  $('a.title').cluetip({
      closePosition: 'top',
      sticky: true,
      closeText: '<img src="http://plugins.learningjquery.com/cluetip/demo/cross.png" alt="close" width="16" height="16" />Close',            
      ajaxCache: false,
      ajaxSettings:  {
        success: function(data) {
            title = "Your new Title";            
            $(this).attr("title", title); //just set the title for consistency
        }
      },
      onShow : function(ct,c) {
          $(".cluetip-title").text(title); //update the title class with the title
      }
  });

  $('a.basic').cluetip(); //While definning another tip, it is NOT affected by previous one

完成

尽管小提琴可能不会显示出来。我已经对其进行了测试，并且可以正常工作。

Answer 2

首次创建时，Cluetip 会缓存标题。因此，您必须在 onShow 选项中更改它。尝试在 ajaxProcess 步骤中更改它会导致您的更改被覆盖。

但是，您可以使用 ajax 设置选项来获取您想要的标题并将该标题存储在一个变量中。

请记住，默认情况下，线索提示会缓存 ajax 结果。你可以设置 ajaxCache: false 来改变它。

这是一些示例代码

var title;
$('a.clue').cluetip({
    ajaxSettings:  {
        success: function(data) {
            // GET Title here
            title = 'new title';
        }
    },
    ajaxCache: false,
    onShow : function(ct,c) {
         $("#cluetip-title").text(title);
    }
});

您也可以使用 ajaxProcess 选项，但您需要确保调用该选项的默认值，以确保它去除脚本和样式标记。

Answer 3

  $('a.basic').cluetip({
      sticky: true,
      closePosition: 'title',
      ajaxCache: false,
      ajaxProcess: function(data) {
        data = {title: "AjaxTitleGoesHere", body:"AjaxBodyGoesHere"};
        $(this).attr("title", data.title);
        return data.body;
      },
      onShow: function(ct, c) {
        ct.find(".cluetip-title").append(
            $(this).attr("title")
        );
      }
  });

Answer 4

你可以这样做：

$('a.basic').cluetip({
    ajaxProcess: function(data) {
        // Suppose the data come with the following structure:
        data = { title: "Another title", body: "Blah blah blah blah" };

        $(this).attr("title", data.title);
        return data.body;
    },
    onShow: function(ct, c) {
        ct.find(".cluetip-title").text(
            $(this).attr("title")
        );
    }
});

在这里查看它的实际效果：http: //jsfiddle.net/A9EQ5/20/

Answer 5

您始终可以隐藏标题并使用 ajax 响应来模拟它。