我已经尝试过在其他类似线程上找到的解决方案,但无法让它们工作。
我有一个引导按钮,当处于禁用状态时,应该有一个工具提示,让用户知道它被禁用的原因。
我知道处于禁用状态的按钮有一个 CSS 可以防止鼠标悬停事件到达按钮元素,并且有解决方法。
我在下面的代码中做错了什么?
// Grab button from DOM
let resultsBtn = document.getElementById("get-results-btn");
// if conditional is met, disable button
$(resultsBtn).prop("disabled", true);
// then, add tooltip
$(resultsBtn).attr("data-toggle", "tooltip");
$(resultsBtn).attr("title", "you may only submit this form once");
// add css rules to make tooltip work on disabled button
$(resultsBtn).css("pointer-events", "none");
/* ====================================== */
/* Button styling */
/* ====================================== */
#get-results-btn {
// insert styling rules for color, size, etc. here, plus the following rules:
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
pointer-events: none; ////// Added this based on [S/O thread][1]
}
#get-results-btn .btn[disabled] //// I pulled this line from [S/O thread][1], but I don't think the class applies to my code?
<button id="get-results-btn" class="btn standard-btn-style">
Get Results
</button>
试试这个代码:
// Grab button from DOM
let resultsBtn = "#wrapper";
//// if conditional is met, disable button
$("#get-results-btn").prop("disabled", true);
// then, add tooltip
$(resultsBtn).attr("data-bs-toggle", "tooltip");
$(resultsBtn).attr("title", "you may only submit this form once");
#get-results-btn {
display: inline-block;
}
#get-results-btn .btn[disabled] {
pointer-events: none;
}
<div id="wrapper">
<button id="get-results-btn" class="btn standard-btn-style">
Get Results
</button>
</div>
<!--CDNs-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
我对您的代码所做的更改:
为按钮添加了一个包装器 div,以便包装器可以显示工具提示
您被添加到
pointer-events: none
错误的班级。已更正。
在javascript代码中,应该是
data-bs-toggle
而不是data-toggle
。
根据文档:
具有
属性的元素不具有交互性,这意味着 用户无法聚焦、悬停或单击它们来触发工具提示(或 弹出窗口)。作为解决方法,您需要从 包装器disabled
或<div>
,理想情况下使用键盘可聚焦<span>
,并覆盖禁用的指针事件 元素。tabindex="0"
引用文档本身的示例:
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>