Bootstrap 5.2工具提示

Question

我试图使用tooltip并在我的jquery datatable上使用jquery显示它，问题是工具提示未显示。

这是我的代码:

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

通过调用:

，确保您已经初始化了页面上的工具提示特性

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

如果仍然不起作用，检查在初始化工具提示时，您想要显示工具提示的元素是否可见。如果元素是隐藏的，则不会显示工具提示。

最后，检查你想要显示工具提示的元素是否不在一个属性为overflow: hidden或pointer-events: none的容器中，因为这也会隐藏工具提示。