时间戳

首页 > 解决方案 > Bootstrap 4 工具提示的 2 个问题。第一个 - 单击按钮时显示，第二个 - 显示禁用元素

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

问题描述

我正在使用 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元素，不应该像它显示的那样，但不是' t 风格为黑色。

标签： javascriptjqueryhtmlbootstrap-4tooltip

解决方案

使用您提供的代码，您的按钮在单击时不会显示工具提示，但在悬停时会延迟 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 属性禁用元素的所有鼠标事件。这意味着您必须手动关闭工具提示，因为您的 mouseout 事件不会在您的禁用按钮上触发

推荐阅读