클릭시 jtip 툴팁의 값 변경 (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