Can't Change Bootstrap Tooltip Title

Can't change bootstrap Tooltip title

This might help

$('[data-toggle="tooltip"]').attr("title","NEW TEXT");

If you want to for a particular element, say a <div>

$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");

Change Twitter Bootstrap Tooltip content on click

Just found this today whilst reading the source code. So $.tooltip(string) calls any function within the Tooltip class. And if you look at Tooltip.fixTitle, it fetches the data-original-title attribute and replaces the title value with it.

So we simply do:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

and sure enough, it updates the title, which is the value inside the tooltip.

A shorter way:

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');

Bootstrap 5 update Tooltip Title with Javascript

You can update the tooltip title by changing the data-bs-original-title attribute

$(function () {

  // Init
  $('[data-toggle="tooltip"]').tooltip()
  
  // Update jquery
  // $('#tt').attr('data-bs-original-title', 'New Tooltip Title');
  
  // Update js
  document.getElementById('tt').setAttribute('data-bs-original-title', 'New Tooltip Title');
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id='tt' class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip title">
  Tooltip
</button>

How to overwrite twitter bootstrap tooltip?

You can't override the tooltip object once you have initialized it on one element. But you can delete it and do it again.

Try deleting and then reinitialize the tooltip with all your options (if you had any).

$('#selector').data('bs.tooltip',false)          // Delete the tooltip
              .tooltip({ title: 'new text'});

There may be a need to remove the listeners, but it works like that.

---

Before TWBS v3 you would not need the bs namespace giving : data('tooltip')

can't change the CSS of the bootstrap tooltip arrow

Adding the CSS to class .tooltip.top .tooltip-arrow will resolve the issue, as shown in the below-working snippet.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
.example-tooltip .tooltip {  position: relative;  display: inline-block;  margin: 10px 20px;  opacity: 1;}.tooltip-inner {  max-width: 200px;  padding: 3px 8px;  color: #fff;  text-align: center;  background-color: gray;  border-radius: 4px;}.tooltip.top .tooltip-arrow {  bottom: 0;  left: 50%;  margin-left: -5px;  border-width: 5px 5px 0;  border-top-color: gray;}

<div class="example-tooltip">  <div class="tooltip top" role="tooltip">    <div class="tooltip-arrow"></div>    <div class="tooltip-inner"> Tooltip on the top </div>  </div></div>

Change Bootstrap tooltip color

You can use this way:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

And in the CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

jsFiddle

---

Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

---

Use this for Bootstrap 4:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

Full Snippet:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgba(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>

---

Related Topics