刷新一個元素，使其新的工具提示顯示（在jQuery/Javascript中）

我有一個html元素，它使用引導工具提示來顯示標題時，它懸停在上面。但是，當您單擊此元素時，我正在更改工具提示，但直到從中刪除鼠標並再次將鼠標懸停在元素上時，新的工具提示纔會顯示。刷新一個元素，使其新的工具提示顯示（在jQuery/Javascript中）

我希望在點擊按鈕時立即顯示工具提示。我怎樣才能做到這一點？有沒有一種方法可以「刷新」，缺乏更好的單詞，html元素？

來源

2014-02-27 Weblurk

如果您發佈它會幫助代碼 – christiandev

嗯，我不確定引導程序中有任何「刷新」事件，但是解決方法是在點擊事件回調結束時在內部調用'mouseover'事件。 – dreamweiver

嘗試這種方式

HTML代碼：

<h3> 
Sensors Permissions 
    <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i> 
</h3>

jQuery代碼：

$(document).ready(function() { 
    $('#example').tooltip(); 
    $('#example').on('click', function() { 
    $(this).attr('data-original-title', 'changed tooltip'); 
    $('#example').tooltip(); 
    $(this).mouseover(); 
    }); 
});

現場演示：

http://jsfiddle.net/dreamweiver/9z404crn/

注：以上邏輯只適用於引導版本2.3.2 和以下，然而通過@提供的解決方案NabiK.A.Z的將與最新版本的正常工作。

編碼快樂:)

來源

2014-02-27 10:20:59 dreamweiver

完美，正是我想要的。所以mouseover（）是我錯過了。謝謝！ – Weblurk

@Weblurk：快樂編碼:) – dreamweiver

不要使用Bootstrap 3.3.0+，你可以試試它在這裏測試失敗：http://jsfiddle.net/NabiKAZ/GRyAN/404/ 我建議使用這個解決方案： http://stackoverflow.com/a/33699472/1407491 –

當然，你只需要onclick事件中改變工具提示文本

$('.tooltip-inner').html("This is a test");

我已經創建了一個對的jsfiddle你作爲一個示範http://jsfiddle.net/a4WwQ/59/

目前，它會改變所有可見的提示文字，其心不是真的是一個問題，因爲你一次不會展示超過一個。話雖如此，你應該考慮修改代碼以指向最接近的工具提示。

希望它有幫助！

來源

2014-02-27 10:16:18 heymega

正如您所說的，如果頁面中有兩個工具提示，那麼您的解決方案不能很好地工作。我認爲這個解決方案更好：http://stackoverflow.com/a/33699472/1407491 –

同意 - 我已經更新了你的jsfiddle，當所有的工具提示顯示時，懸停在一個。 https://jsfiddle.net/a4WwQ/1031/ – heymega

您可以使用此代碼：

var newTooltip = 'Changed this tooltip!'; 
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);

我自舉3.3.4在這裏測試一下，你可以看到它：http://jsfiddle.net/NabiKAZ/a4WwQ/1029/

來源

2015-11-13 18:27:03

刷新一個元素，使其新的工具提示顯示（在jQuery/Javascript中）

回答

相關問題