Using Bootstrap 5 to create custom tooltips

Question

I am using Bootstrap 5 and am attempting to create a custom tooltip. I see the markup used in the Bootstrap 5 documentation here.

Bootstap 5 Tooltips Markup

I gathered (and looked online) that the tooltips are not in the calling element and are siblings. I am trying to use a custom class like so with the below markup.

// CSS test option #1
.custom-tooltip + .tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

// CSS test option #2
.custom-tooltip ~ .tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

<span class="custom-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="The tooltip text<br/>Extra textC">
    <svg ... ></svg>
</span>

So if you only use .tooltip-inner, obviously, it works fine, but I do not want a global tooltip and need to have different custom tooltips.

can you please upload code somewhere, i mean codesandbox or jsfiddle — Janak Prajapati, Feb 20 '21 at 19:44

score 9 · Accepted Answer · 2021-02-21T07:52:07.750

(This one took some time to figure out since the canonical answer does not work --- this may well be a JSFiddle thing, or a BS5 bug .. not sure.)

The documented approach is to add your custom class to the customClass option, like so:

<span data-bs-customClass="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
  STUFF
</span>

But I can't get that to work on this JSFiddle. This is because the html is rendered (on Chrome) in all lowercase and the "C" in "customClass" renders "customclass" .. so the BS5 JS never picks it up. The workaround is to pass that option in the tooltip initialiser, like so:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
    'customClass': 'custom-tooltip'
  })
})

And then your CSS should work as normal with:

.custom-tooltip.tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

EDIT:

Turns out this was fixed ... correct method is to add a hyphen "-" before an uppercase option and use the lowercase form, like so:

<span data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
  STUFF
</span>

The initialiser should then also exclude that option (adding it overrides the data attribute). Initialiser is a as per docs:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

This is awesome. You are correct, the documented approach does not work in my local (outside of JSFiddle) but using Chrome. Your workaround works very well. The bounty is yours when it can be awarded. Thanks. I agree this is a BS5 bug. There are also other issues in the bug tracker (with workarounds) dealing with SVGs as well. — cdub, Feb 21 '21 at 03:59
Umm... been looking at this a bit more. This was raised as a bug in [#32935](https://github.com/twbs/bootstrap/issues/32935) and then closed by XhmikosR as fixed by commit [#32995](https://github.com/twbs/bootstrap/commit/b6cae918938038f0fad4df9fbbfdc4190d7a68f7). According to that one needs to use `data-bs-custom-class`. **But...* that's not working either. :( — , Feb 21 '21 at 04:55
Oh!! SILLY ME! `data-bs-custom-class` does work! Didn't work in the JSFiddle because the JS initialiser overrides the data attribute. Remove the JS option and the data attribute works. Rule is add hyphen "-" before uppercase option name and use lowercase form. Editing the answer to express this correction. — , Feb 21 '21 at 07:55

score 0 · Answer 2 · answered Aug 12 '23 at 11:35

I wanted to show the tooltip with click so the code would be like this :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link rel="stylesheet" href="@{/styles/bootstrap_rtl_5.2.3.min.css}"/>
</head>

<body>


<img alt="i" data-bs-customClass="custom-tooltip-does-not-work" data-bs-html="true"
     data-bs-toggle="tooltip" src="@{/bootstrap-icons-1.10.5/info-circle-fill.svg}"
     title="#{card.block.agreement.contract.info}">

<script>
    $(document).ready(function () {
        [].slice.call(document.querySelectorAll('img[data-bs-toggle="tooltip"]')).map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl, {
                'customClass': 'custom-tooltip',
                animated: 'fade',
                placement: 'bottom',
                trigger: 'click'
            })
        })
    });
</script>

</body>

</html>

also thanks to : Bootstrap tooltip click trigger not working

Using Bootstrap 5 to create custom tooltips

2 Answers2

Linked