Bootstrap 5.2 tooltip

Question

I was trying to use tooltip and show it using jquery on my jquery datatable the problem is the tooltip is not showing.

here's my code:

render: function (data, type, row, meta) {
    var total = row.success + row.error;
    if (row.isConsumed == true) {
        if (total == 100) {
            return `<button class="btn btn-sm text-light order-completion" id="order-completion">CONSMUPTIONS</button>`
        } else {
            return `  <div class="btn-group" role="group" aria-label="GroupButton">
                        <button class="btn btn-sm text-light order-completion" disabled>CONSUMPTION</button>
                        <button type="button" class="btn btn-secondary btn-sm"
                                data-bs-custom-class="custom-tooltip"
                                data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top"
                                data-bs-title="Some title here">
                          <i class="fa-solid fa-circle-info"></i>
                        </button>
                      </div>
                    `;
            //return `<button class="btn btn-sm text-light order-completion" disabled>CONSUMPTION</button>`
        }
    } else {
        return `<button class="btn btn-sm text-light order-completion" disabled>CONSUMPTION</button>`
    }
},

Answer 1

Make sure that you have initialized the tooltip feature on your page, by calling:

$('[data-bs-toggle="tooltip"]').tooltip() 

after the datatable has been created.

If still doesn't work, check if the element that you want to show the tooltip on is visible when the tooltip is being initialized. If the element is hidden, the tooltip will not be displayed.

And finally, check if the element that you want to show the tooltip on is not inside a container with the property of overflow: hidden or pointer-events: none, as this will also hide the tooltip.