'Why doesn't Bootstrap5 tooltip work in other BS5 component?

So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.

<div class="row">
    <div class="col-12 col-md-4">
        <a class="card">
            <div class="card-body">
                <div class="card-title">this is title.&nbsp;<span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
            </div>
        </a>
    </div>
</div>

What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)

bootstrap-5

Solution 1:^[1]

here is a working example of a tooltip on a whole card: Working demo

Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.

Feel free to change the id name from example to your desired id (in both script.js and index.html).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ilpianoforte

'Why doesn't Bootstrap5 tooltip work in other BS5 component?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]