单击时更改 qtip 工具提示的值 (jquery)

Question

我有一个带有工具提示 (qtip) 的 link。在切换时，它会在页面上快速添加一个 link。如果我再次单击它，它会删除快速 link。到目前为止，一切都很好。但是我也想更改切换时数据工具提示的文本（从 "add quick link" 到 "remove quick link"）

这是我目前得到的：

<a class="add-link" data-tooltip="add quick link"></a>

jquery:

$('.add-link').click(function () {
    if ($(this).attr('data-tooltip', 'add quick link')) {
        $(this).attr('data-tooltip', 'remove quick link');
    } else {
        $(this).attr('data-tooltip', 'add quick link');
    }
    $(this).toggleClass("added");
});

css:

a.add-link {
   content: '+';
}

a.add-link.added {
  content: '-';

}

它正确地切换了 class，但是 qtip 工具提示中的文本没有改变。已经在 SO 和 qtip API 上进行了搜索，但无法完成这项工作。有谁知道我做错了什么？谢谢

Answer 1

这有效，但您必须将鼠标移开并移回锚点上方才能看到它在单击后发生了变化。

$('.add-link').click(function() {
  if ($(this).attr('data-tooltip') === 'add quick link') { /* fixup */
    $(this).attr('data-tooltip', 'remove quick link');
  } else {
    $(this).attr('data-tooltip', 'add quick link');
  }
  $(this).toggleClass("added");
});

/* '.add-link' instead of 'a' if you like, or 'a.add-link' */
$('a').qtip({
  content: {
    text: function(event, api) {
      return $(this).attr('data-tooltip')
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.css" rel="stylesheet" />
<a class="add-link" data-tooltip="add quick link" href="#">I am an anchor...</a>
<br>Click link &amp; move mouse out and back over to see tooltip changed

单击时更改 qtip 工具提示的值 (jquery)

Changing the value of a qtip tooltip on click (jquery)

jquery

qtip2