заменить текст подсказки (bootstrap), нажав

Question

Я пытаюсь изменить текст кнопки всплывающей подсказки при нажатии на фактическую кнопку, а затем после того, как мышь не над кнопкой, чтобы динамически вернуть текст всплывающей подсказки по умолчанию. У меня проблемы с кодом jquery. Пусть кто-нибудь объяснит мне, как все работает. Моя идея - сначала проверить, нажата ли кнопка, а затем, если она будет отображаться (изменить подсказку всплывающей подсказки по умолчанию), тогда, когда мышь больше не находится над кнопкой или кнопка не будет нажата, чтобы отобразить сообщение всплывающей подсказки, но я не могу Поместите вещи в мою голову, как это будет структурировано. Любые советы более чем приветствуются.

вот мой код до сих пор.

$(function() { 
 
\t var $toolTip = $('#tooltip-example'); 
 
\t $toolTip.tooltip(); 
 

 
\t $toolTip.click(function(){ 
 
\t \t $myToolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show'); 
 
\t }); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Попробуйте, как показано ниже.

Единственная проблема, я вижу в вашем примере, что $ myToolTip не определен, вы должны означало $ TOOLTIP.

Другой проблемой, связанной с фрагментами SO, было положение кнопки на верхней панели экрана, это привело к тому, что всплывающая подсказка не отображалась должным образом, я изменил направление всплывающей подсказки на дно, чтобы исправить ее.

$(function() { 
 
    var $toolTip = $('#tooltip-example'); 
 
    var originalTitle = $toolTip.attr('title'); 
 
    $toolTip.tooltip({placement: "bottom"}); 
 

 
    $toolTip.click(function() { 
 
    $toolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show'); 
 
    }); 
 
    
 
    $(document).on("mouseout","#tooltip-example",function() 
 
    { 
 
    $toolTip.attr('title',originalTitle).tooltip('fixTitle').tooltip('show'); 
 
    }); 
 

 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button>