Bootstrap 5.2 tooltip-CodePudding

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  id="order-completion">CONSMUPTIONS</button>`
        } else {
            return `  <div  role="group" aria-label="GroupButton">
                        <button  disabled>CONSUMPTION</button>
                        <button type="button" 
                                data-bs-custom-
                                data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top"
                                data-bs-title="Some title here">
                          <i ></i>
                        </button>
                      </div>
                    `;
            //return `<button  disabled>CONSUMPTION</button>`
        }
    } else {
        return `<button  disabled>CONSUMPTION</button>`
    }
},

CodePudding user response：

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.