v5 Tooltip: no way to update tooltip text

[finom]

Hey guys! I've noticed that Bootstrap 5 isn't rely on jQuery and I decided to use the Bootstrap Tooltip for the first time. Every time when I used or implemented some tooltip library I suppose its text to be dynamically updated. But for some reason such important feature isn't implemented here and there is no way to easily hack it.

1. Setting htmlElement.title = 'new value'; tooltipInstance.update(); has no effect.
2. Using tooltipInstance._config.title = 'new value'; tooltipInstance.update(); has no effect.
3. Using tooltipInstance.setContent('new value'); has no effect.
4. Destroying tooltip by tooltipInstance. dispose() and creating another instance makes tooltip element disappear.

Since it's so hard to update text value and it looks like there was a purpose to disallow doing it in any way. The only hack worked for me is listening 'inserted.bs.tooltip' and 'show.bs.tooltip' events to run `tooltipInstance.tip.querySelector('.tooltip-inner').textContent = 'new value'. The hack requires to set tooltip value to whatever since empty title disables any tooltip behaviour.

I use Bootstrap for 7 years but never its JavaScript library. I hope to start doing it to avoid using tons of other libraries. Thank you.

[ajaypatelaj]

Thanks, @finom for raising this concern.

We're facing the same and tried all the mentioned possibilities and it's not working. I guess team bootstrap should consider these features/options. @alpadev

[wfisk]

Create a function called getTitle and create the tooltip using JavaScript.

var title = 'tooltip text';
function getTitle(){ 
  return title; 
}
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, { 
  title: getTitle 
})

[caiotarifa]

Does not work for me.

[RedLucas]

Ya, I don't think the javascript honours the title parameter here... Or the documentation is incorrect.

It says the element's title is the "default", but I think it's more likely that if the title attribute is set, then it always uses it.

I am also running into a similar issue of wanting to update a tooltip's title using javascript and finding it to be unnecessarily difficult to accomplish.

I'd like a setTitle() method on the tooltip itself.

[lopey66]

having this function before closing the allows me to update though afterwards I cannot update.
when I debug using chrome, I can see the title updated though is its not being passed back view in the browser

<script> function fnUpdateBootStrapTitle(ele,new_tip) { var getel=document.getElementById(ele); getel.setAttribute("data-bs-original-title", new_tip); getel.setAttribute("aria-label", new_tip); getel.title = new_tip; // you can see both title on mouse over } </script>

I have found that I can see the title /tooltip add by having scripts added before closing the

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script> <script> //__________________________________________________________________________ var tooltipTriggerList = [].slice.call(document.querySelectorAll('."'".'[data-bs-toggle="tooltip"]'."'".')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl);}); //__________________________________________________________________________ </script>

[anthonySIA]

This worked for me (hopefully someone can use it)

var toolTip = bootstrap.Tooltip.getInstance($tooltipEl[0]);

if (toolTip != null) {
    toolTip._config.title = "new tooltip text";
    toolTip.setContent();
    toolTip.update();
} else {
    toolTip = new bootstrap.Tooltip($tooltipEl[0], {
    trigger: "manual"
    ...
}

[MrTanoshii]

v5.2.0 now has the setContent method https://getbootstrap.com/docs/5.2/components/tooltips/#methods

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

[lopey66]

Lucas this is using JQuery in the script, also your bootstrap.min.css should be where you end </body> and not after the <head> where most people have been having it with all the scripts & CSS as the tooltip will not work. I have the CSS in after the <head> section. latest version of bootstrap 5.2.0: <script src=" ***@***.***/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> <script> //__________________________________________________________________________ function fnUpdateBootStrapTitle(ele,new_tip) { var eleID=document.getElementById(ele);eleID.setAttribute("data-bs-original-title", new_tip); eleID.addEventListener("mouseover", function(event) { ;},false); var hash ="#"+ele; $(document).ready(function () { $(hash).tooltip(); $(hash).on('click', function () { $(this).tooltip('dispose'); $(this).tooltip('enable'); $(this).attr('data-bs-original-title',new_tip); $(this).tooltip('update'); $(this).tooltip('show'); }); }); };//__________________________________________________________________________ </script> </body> kind regards, *Luis Lopez*

…

On Fri, 22 Jul 2022 at 17:19, T. C. Vincent Leung Yin Ko < ***@***.***> wrote: v5.2.0 now has the setContent method https://getbootstrap.com/docs/5.2/components/tooltips/#methods const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance // setContent exampletooltip.setContent({ '.tooltip-inner': 'another title' }) — Reply to this email directly, view it on GitHub <#34343 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOSL6B4ULB5OEO5SWKI4OTVVJDOVANCNFSM47NNRJBA> . You are receiving this because you commented.Message ID: ***@***.***>

[lopey66]

I have placed this function & script before the end of the body and works fine for updating tooltips continuously. using BS5.2.2+ //_____________ **** Set Tooltip Title 5.2.2 ****

…

________________________________ function fnUpdateBootStrapTitle(ele,new_tip) { var eleID=document.getElementById(ele); const tooltip = bootstrap.Tooltip.getInstance(eleID); tooltip.setContent({ ".tooltip-inner": new_tip }); }; var tooltipTriggerList = [].slice.call(document.querySelectorAll('."'".'[data-bs-toggle="tooltip"]'."'".')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl);}); //__________________________________________________________________________ kind regards, *Luis Lopez*

On Tue, 3 Jan 2023 at 22:08, Mirthe ***@***.***> wrote: This works for me: var tooltip = bootstrap.Tooltip.getInstance($(this)) $(this).attr("data-bs-original-title", "my new text") tooltip.setContent(); tooltip.update(); — Reply to this email directly, view it on GitHub <#34343 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOSL6ARBZ2YDRSGEUYNCR3WQQCDDANCNFSM47NNRJBA> . You are receiving this because you commented.Message ID: ***@***.***>