javascript - Bootstrap 4 工具提示有 2 个问题。第一个 - 单击按钮时显示，第二个 - 显示禁用元素

Question

我正在使用 Bootstrap 4，但我的 tooltip 有问题.

我将以下内容加载到我的 index.html 中:

$('body').tooltip({ selector: '[data-toggle="tooltip"]', delay: { show: 550, hide: 0 } });

但是当我单击“I”按钮时，tooltip显示并保留在我所在的页面上。

使用index在上面的代码中，我单击一个菜单选项并使用以下命令进入页面:

$('#adminCreateInvoiceLink').on('click', function () {
    $('#mainPanel').load('components/specificPagesAdministrator/createInvoices/createInvoices.html');
})

如果我将鼠标悬停在按钮上，我的 tooltip显示然后隐藏

<button id="clearButton" data-toggle="tooltip" data-placement="bottom" aria-hidden="true" title="Click to clear the date"
class="btn roundButton d-flex align-items-center justify-content-center alert-warning" disabled>
    <i class="fas fa-times" style="font-size: medium"></i>
</button>

页面加载

点击“X”后

我获得的“X”点击的唯一代码如下

$('#clearButton').on('click', function () {
    $('#createInvoiceDateField').val('')
    $('#createInvoiceSubmitButton, #clearButton').prop('disabled', true);
})

这并不是唯一发生的页面，我不想继续添加 script如果它可以帮助也有一个问题，我的 tooltip还显示 disabled元素，不应该是它显示的样子，但不是黑色样式。

Answer 1

使用您提供的代码，您的按钮在单击时不会显示工具提示，但在悬停时会出现 500 毫秒的延迟。如果您想在悬停时立即显示工具提示，请删除 delay: { show: 550, hide: 0 } 部分。

要从您的选择中删除禁用的按钮，请将 :not([disabled]) 添加到您的选择器中。

$('body').tooltip({ selector: '[data-toggle="tooltip"]:not([disabled])'});

$('#clearButton').on('click', function () {
    $('#clearButton').prop('disabled', true);
    $(this).tooltip('hide');
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button id="clearButton" data-toggle="tooltip" data-title="I have a tooltip"
class="btn btn-success"> I have a tooltip</button>
<button id="clearButton" data-toggle="tooltip" class="btn btn-danger" disabled data-title="no title">
  I don't have a tooltip
</button>

编辑:

我刚刚意识到您的意思是您想要禁用的默认工具提示。您可以使用 data-title 作为工具提示，以便具有禁用属性的元素不会显示 title 属性提供的默认工具提示。

此外:disabled 属性禁用元素的所有鼠标事件。这意味着您必须手动关闭工具提示，因为您的鼠标悬停事件不会在禁用的按钮上触发