如何在單擊錨點時改變工具提示？

我正在設計一個用戶可以單擊Glyphicon錨點並將文本複製到剪貼板的設計。我希望工具提示可以在單擊按鈕時進行更改。因此，當鼠標懸停在按鈕上時，它會顯示「複製到剪貼板」，但當點擊它時，工具提示將變爲「複製！」。如何在單擊錨點時改變工具提示？

<div style='margin: 20px;'> 
    <a id='copy-button' href='#' class='my-tool-tip' data-toggle="tooltip" 
     data-placement="right" title="Copy to Clipboard"> 
     <i class='glyphicon glyphicon-link'></i> 
    </a> 
</div>

這是GitHub的UI在分叉存儲庫時的行爲方式。

End Result

我有複製功能的工作，初始懸停提示，我無法弄清楚如何使點擊的變化。我還創建了一個jsfiddle來幫助描述我在說什麼。提前致謝！

http://jsfiddle.net/t9Ku6/381/

來源

2017-01-25 user5494969

什麼你要找的是jQuery的一個click()事件更新提示的data-original-title屬性：

$("a.my-tool-tip").click(function(){ 
    $("a.my-tool-tip").attr('data-original-title', 'Copied'); 
});

請注意，這可能是一個小馬車獲得新的稱號才能通過，所以你可能需要關閉並重新打開提示：

$("a.my-tool-tip").click(function(){ 
    $("a.my-tool-tip").attr('data-original-title', 'Copied'); 
    $("a.my-tool-tip").tooltip('show'); 
});

我已經創建了一個fiddl e展示這here。

來源

2017-01-25 22:02:27

你不需要的。（ '隱藏'）的一部分。 – shipshape

@shipshape - 真棒，更新:) –

爲了讓您能夠達到同樣的效果，你可以使用這個jQuery的片段：

$("a.my-tool-tip").tooltip(); 
$("#copy-button").on('click', function() { 
    var tooltip = $(this); 
    tooltip.attr('data-original-title', 'Copied!'); 
    $("a.my-tool-tip").tooltip('show'); 
});

要切換提示的觀點，你只需要使用.show()。

這裏是一個工作Fiddle.

來源

2017-01-25 22:06:42 snkv

jQuery的支持click功能的元件上設置。結合一些引導tooltip methods，你是金。

jQuery的

$('#copy-button').click(function(){ 
    $(this).attr("data-original-title", "Copied!"); 
    $(this).tooltip('show'); 
})

jsfiddle

來源

2017-01-25 22:06:46

如何在單擊錨點時改變工具提示？

回答

相關問題