Блог

Главная - Вопросы по программированию - jQuery как переключать текст всплывающей подсказки начальной загрузки при нажатии

jQuery как переключать текст всплывающей подсказки начальной загрузки при нажатии

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

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

JS FIDDLE

     $('.link1').on('click', function(){
         $(this).attr('data-original-title','Tooltip Changed');
    });
    
    $('.link2').on('click', function(){
         $(this).attr('data-original-title','Tooltip Changed');
    });
    
    $('.link3').on('click', function(){
         $(this).attr('data-original-title','Tooltip Changed');
    });
    
    $('.link4').on('click', function(){
         $(this).attr('data-original-title','Tooltip Changed');
    });  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="link link1" data-toggle="tooltip" data-placement="top" title="Tooltip 1">Button 1</a>
    
    <a class="link link2" data-toggle="tooltip" data-placement="top" title="Tooltip 2">Button 2</a>
    
    <a class="link link3" data-toggle="tooltip" data-placement="top" title="Tooltip 3">Button 3</a>
    
    <a class="link link4" data-toggle="tooltip" data-placement="top" title="Tooltip 4">Button 4</a>

Ответ №1:

Ваш код JavaScript / jquery должен быть таким, как показано ниже, чтобы изменять текст всплывающей подсказки при нажатии на ссылку. Способ изменить текст всплывающей подсказки — задать заголовок всплывающей подсказки, а затем вам нужно отобразить всплывающую подсказку при нажатии на ссылку.

Вы можете увидеть рабочий пример на JSFiddle

 $("a").tooltip();

$('.link1').on('click', function() {
  toggleToolTip.call(this, "Tooltip 1", "Tooltip Changed");
});

$('.link2').on('click', function() {
  toggleToolTip.call(this, "Tooltip 2", "Tooltip Changed");
});

$('.link3').on('click', function() {
  toggleToolTip.call(this, "Tooltip 3", "Tooltip Changed");
});

$('.link4').on('click', function() {
  toggleToolTip.call(this, "Tooltip 4", "Tooltip Changed");
});

function toggleToolTip(originalTitle, newTitle) {
  var lastTitle = $(this).attr('data-original-title');
  $(this).attr('data-original-title',lastTitle === originalTitle ? newTitle : originalTitle);
  $(this).tooltip("show");
}

Комментарии:

1. Я хочу, чтобы всплывающая подсказка переключалась. Например, при первом нажатии всплывающая подсказка должна быть изменена. и при втором нажатии текст всплывающей подсказки должен быть изменен на исходный и так далее.

2. ОК. Тогда позвольте мне изменить пример.

Ответ №2:

давайте попробуем…

простая всплывающая подсказка, отображаемая jquery.

 $(".item").click(function() {
  $( ".tooltip" ).removeClass( "hide" ); 
  $( ".tooltip" ).addClass( "show" );

})

$(".tooltip").click(function() {
  $( ".tooltip" ).removeClass( "show" );   $( ".tooltip" ).addClass( "hide" );
   
})  
 .item {
  width: 100px;
  Height: 100px;
  background: #EEE;
  padding: 20px;
  cursor: pointer;
}

.tooltip {
  cursor: pointer;
  position: fixed;
  padding: 20px;
  background: #EEE;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: none;
  z-index: 1999;
}
.tooltip:after {
  content: "X";
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  top:0px;
  right: 0px;
  padding: 5px;
  z-index:988;
}
.hide {
  display: none;
}
.show {
  display: block;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  Icon
</div>
<div class="tooltip">Content goes there</div>