Question

我想在单击工具提示时更改其文本。这是我当前的代码：

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

我要更改的工具提示是这个

<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>

谢谢

Answer 1

您已将.attr('data-original-title', "hola").tooltip('fixTitle').tooltip('show');添加到$('.mail')，它必须位于img内的$('.mail')中。这是一个示例：

$(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.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/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.com/350x150">
</a>

Answer 2

希望此代码有效

<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代码

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


}

Answer 3

<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>

Answer 4

使用 Jquery

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

单击工具提示时更改Bootstrap的文本

4 个答案: