javascript - Change text of Bootstrap when clicked Tooltip - Stack Overflow

admin管理员组

文章数量:1402086

I want to change the text of my tooltip when it is clicked. This is my current code:

function myFunction() {
    var copyText = document.getElementById("myInput");
    copyText.select();
    document.execCommand("copy");
    $('.mail').tooltip('hide')
        .attr('data-original-title', "hola")
        .tooltip('fixTitle')
        .tooltip('show');
}

And the tooltip I want to change is this one

<a href="#" onclick="return false;" class="mail">
    <img data-toggle="tooltip" data-placement="top" title="Copia mi correo" src="img/mail.png" onclick="myFunction()">
</a>

Thank you

I want to change the text of my tooltip when it is clicked. This is my current code:

function myFunction() {
    var copyText = document.getElementById("myInput");
    copyText.select();
    document.execCommand("copy");
    $('.mail').tooltip('hide')
        .attr('data-original-title', "hola")
        .tooltip('fixTitle')
        .tooltip('show');
}

And the tooltip I want to change is this one

<a href="#" onclick="return false;" class="mail">
    <img data-toggle="tooltip" data-placement="top" title="Copia mi correo" src="img/mail.png" onclick="myFunction()">
</a>

Thank you

• javascript
• jquery
• html
• bootstrap-4
• tooltip

Share Improve this question Follow edited Jul 10, 2018 at 10:27 Gucci 93111 gold badge88 silver badges2727 bronze badges asked Jul 10, 2018 at 10:02 David Lamas JimenezDavid Lamas Jimenez 5922 silver badges77 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You have added .attr('data-original-title', "hola").tooltip('fixTitle').tooltip('show'); to $('.mail') it need to be in img inside $('.mail'). Here is an example:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="tooltip"]').on('click', function() {
    $(this).attr('data-original-title', 'tool tip has been changed.')
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<a href="#" onclick="return false;" class="mail">
    <img data-toggle="tooltip" data-placement="top" title="Copia mi correo" src="http://via.placeholder./350x150">
</a>

<pre>You can use:</pre>

<a onclick="test()" id="test" href="#" data-toggle="testtip" title="first content!">Click me</a>


<script>
$(document).ready(function(){
    $('[data-toggle="testtip"]').tooltip();   
});
function test() {
$("a").attr("data-original-title", "New content");  
}
</script>

Since none of the answers use the method tooltip('dispose'). I'll post my answer anyway because none of the answers answer a live update of the tooltip.

I also immediately provide a working version for Bootstrap 4 & 5

This Bootstrap method and more can be found here

Bootstrap 5:

$(document).ready(function() {

  $('[data-bs-toggle="tooltip"]').tooltip();

  $('.mail').on('click', function() {
    let el = $(this);
    let d = new Date();
    let cur_time = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
    el.find('img').attr('data-bs-original-title', `My new text ${cur_time}`).tooltip('dispose').tooltip().tooltip('show');
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="row mt-5 justify-content-center">
  <a href="#" class="mail">
    <img data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="my old text" src="http://via.placeholder./350x150">
  </a>
</div>

Bootstrap 4:

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  
  $('.mail').on('click', function() {
    let el = $(this);
    el.find('img').attr('title', 'My new text').tooltip('dispose').tooltip().tooltip('show');
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<div class="row mt-5 justify-content-center">
  <a href="#" class="mail">
    <img data-toggle="tooltip" data-placement="top" title="my old text" src="http://via.placeholder./350x150">
  </a>
</div>

Hope this code works

<a href="#" onclick="return false;" class="mail">
<img id="myinput" data-toggle="tooltip" data-placement="top" title="Copia mi correo" src="img/mail.png" onclick="myFunction()">

javascript code

function myFunction()
{   
    document.getElementById("myinput").setAttribute("title", "My new toogle text");


}

With Jquery

$(this).tooltip('hide')
.attr('data-original-title', 'new text')
.tooltip('show');

本文标签： javascriptChange text of Bootstrap when clicked TooltipStack Overflow