jquery 将工具提示添加到禁用的引导按钮

uinbv5nw 于 9个月前发布在 jQuery

关注(0)|答案(2)|浏览(133)

我尝试了其他similar threads上的解决方案，但无法让它们工作。
我有一个引导按钮，当处于禁用状态时，应该有一个工具提示，让用户知道为什么它被禁用。
我知道一个处于禁用状态的按钮有一个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>

jquery

来源：https://stackoverflow.com/questions/77701318/add-tooltip-to-a-disabled-bootstrap-button

2条答案

按热度按时间

cgyqldqp1#

试试这个代码：

// 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>

我对你的代码所做的修改：

为按钮添加了一个 Package 器div，因此 Package 器可以显示工具提示
你被添加到错误的类pointer-events: none。已更正。
在JavaScript代码中，它应该是data-bs-toggle而不是data-toggle。

赞(0）回复(0）举报 9个月前

4si2a6ki2#

根据文件：
具有disabled属性的元素不是交互式的，这意味着用户不能聚焦、悬停或单击它们来触发工具提示（或弹出框）。作为一种解决方法，您需要从 Package 器<div>或<span>触发工具提示，理想情况下使用tabindex="0"使其可用于键盘聚焦，并覆盖禁用元素上的pointer-events。

引用自文档本身的示例：

<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>

字符串

赞(0）回复(0）举报 9个月前

我来回答

jquery 将工具提示添加到禁用的引导按钮

2条答案

相关问题

热门标签

最新问答