クリック時のqtipツールチップの値を変更する（jquery）

Question

リンク先はツールチップ（qtip）です。トグルすると、ページにクイックリンクが追加されます。もう一度クリックするとクイックリンクが削除されます。ここまでは順調ですね。

<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: '-'; 

}

クラスを正しく切り替えることはできますが、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