jquery - Bootstrap tool-tip text change

Question

I'm having an issue where I want to change the text for the tooltip, but it seems it's not doing so, and instead if you hover over you'll the text "your new title." I just want to change the text along with having that hover on text being displayed.

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  $("#tool").attr('title', 'your new title');
});

<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" id="button" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>

Answer 1

jQuery's tooltip() plugin creates a data-original-title attribute on the tooltipped elements, and copies the initial content of that element's title attribute into it.

Dynamic changes to data-original-title are reflected in the tooltip, whereas changes in title do not affect it (after it has already been init'ed).

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  $("#button").attr('data-original-title', 'your new title');
});

<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" id="button" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>