Bootstrap
Replies: 6 comments 3 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
Create a function called getTitle and create the tooltip using JavaScript. |
Beta Was this translation helpful? Give feedback.
-
|
Does not work for me. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
having this function before closing the allows me to update though afterwards I cannot update. 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/bootstrap@5.1.0/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> |
Beta Was this translation helpful? Give feedback.
-
|
This worked for me (hopefully someone can use it) |
Beta Was this translation helpful? Give feedback.
-
|
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance
// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' }) |
Beta Was this translation helpful? Give feedback.
-
|
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:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
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:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
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.
htmlElement.title = 'new value'; tooltipInstance.update();has no effect.tooltipInstance._config.title = 'new value'; tooltipInstance.update();has no effect.tooltipInstance.setContent('new value');has no effect.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.
Beta Was this translation helpful? Give feedback.
All reactions