In Bootstrap 4 I used the following sample code to update the title of the tooltip (where 'statusIcon' is the element, in this case is a font awesome icon, but same principal would apply for a button or anything else:
$(statusIcon).attr('data-original-title', 'Check Error logs for details').tooltip();
Razor page html element:
<i class="fas fa-circle fa-lg" id="statusIcon:@item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>
Reading the manual for Bootrap 5, they don't appear to tell us how to achieve this with Vanilla JS
What I've tried so far in Javascript:
var statusIconId = 'statusIcon:' + pluginId + '';
var statusIcon = document.getElementById(statusIconId);
document.getElementById(statusIconId).setAttribute("data-bs-original-title", 'Check Error logs for details');
Am using variables in the element Id because I'm working with element in a Razor List View.
Useful if you need to change a tooltip's text after it has been initialized: $(this). tooltip('hide') . attr('data-original-title', 'new text') .
You can add different Bootstrap 5 tooltip directions by changing top , right , left , bottom in the data-bs-palcement . By aiming . tooltip-inner and . tooltip-arrow::before , you can change the color.
Drag the calculated field to the appropriate tooltip and you'll see an ATTR dimension pill with a tooltip logo in the Marks card. Insert the ATTR budget and adjusted inflated gross calculated fields into its corresponding tooltip as seen in Image 6. After that, you're dynamic tooltip should work!
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Since Bootstrap 5.0 no longer requires jQuery, use document.querySelector()
, then reinitialize the tooltip after modifying the element:
// initialize
const tooltipElement = document.querySelector('[data-bs-toggle="tooltip"]')
let bsTooltip = new bootstrap.Tooltip(tooltipElement)
// update
tooltipElement.title = 'New Title'
bsTooltip = new bootstrap.Tooltip(tooltipElement)
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<i class="fas fa-circle fa-lg" id="statusIcon:@item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>
(updated to use your Razor page element)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With