向禁用的引导按钮添加工具提示

Question

我已经尝试过在其他类似线程上找到的解决方案，但无法让它们工作。我有一个引导按钮，当处于禁用状态时，应该有一个工具提示，让用户知道它被禁用的原因。我知道处于禁用状态的按钮具有阻止鼠标悬停事件到达按钮元素的 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>

Answer 1

您应该将

pointer-events: none

添加到

#get-results-btn  .btn[disabled]

中。不是

#get-results-btn

。

#get-results-btn {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#get-results-btn .btn[disabled] {
    pointer-events: none;
}

还考虑使用有效的CSS注释（这可能是导致你的问题的原因）