0

I am trying to update the title of the bootstrap tooltip dynamically but end up in getting two tooltips.

I have a paragraph

<p> Some text </p>

which is then parsed into the tokens.

$('p').each(function() {
            var $this = $(this);
            $this.html($this.text().replace(/\b(\w+)\b/g, "<span data-toggle='translatetip' title='old'>$1</span>"));
        });



// bind to each span
    $('p span').hover(
        function() { 
         
            $('#word').text($(this).css('background-color','#ffff66').text());
            $(this).tooltip('enable').attr('title', 'new');
            console.log($(this).tooltip().attr('title'));

        },
        function() { 
            $('#word').text(''); $(this).css('background-color',''); 
        }
        
    );

The above code creates span for every word in the paragraph and on hover the word is highlighted and the tooltip appears. I tried to change the tooltip text on hover dynamically but that does not work. Can anyone please help.

This is the output i am getting.

enter image description here

M. Usaid
  • 72
  • 1
  • 10
  • Does this answer your question? [Change Twitter Bootstrap Tooltip content on click](https://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click) – Lapskaus Jul 25 '22 at 15:07

1 Answers1

1

$('p').each(function() {
            var $this = $(this);
            $this.html($this.text().replace(/\b(\w+)\b/g, "<span data-toggle='translatetip' data-original-title='old'>$1</span>"));
        });

// bind to each span
    $('p span').hover(
        function() { 
            $('#word').text($(this).css('background-color','#ffff66').text());
            $(this).tooltip('enable').attr('data-original-title', 'new');
            console.log($(this).tooltip().attr('data-original-title'));

        },
        function() { 
            $('#word').text(''); $(this).css('background-color',''); 
        }
        
    );
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
  <!-- HTML -->
<p> Lorem ipsum dolor, sit amet, consectetur adipisicing elit.</p>




<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://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

instead of title attribute use (data-original-title)

Marvel'sFan
  • 76
  • 4
  • Thanks for the help but I also tried using `data-orignal-title`, and this doesn't work. I am running the code in Edge. Is there anything that i need to consider for edge? – M. Usaid Jul 25 '22 at 13:03
  • Changing the bootstrap CDN to the new version made it work. Thanks – M. Usaid Jul 29 '22 at 01:26