Dynamic Tooltips
Store tooltip content in .data() and update it dynamically — useful for tooltips that show live data like stock prices or availability.
jQuery
Advanced
4 min read
Dynamic Tooltip Content via .data()
Example
// Store and update tooltip content
$(".price").each(function() {
$(this).data("tooltip", "Loading...");
});
// Update all tooltips with live data
$.getJSON("/api/prices", function(prices) {
prices.forEach(function(item) {
const el = $(`.price[data-id="${item.id}"]`);
el.data("tooltip", `$${item.price} — Updated just now`);
bootstrap.Tooltip.getInstance(el[0])?.setContent({ ".tooltip-inner": el.data("tooltip") });
});
}); Pro Tip
Bootstrap 5 tooltips support dynamic content updates via setContent().