skip to Main Content

I’ve tried solutions found on other similar threads, but can’t get them working.

I’ve got a bootstrap button that, when in a disabled state, should have a tooltip letting the user know why it’s disabled.

I understand that a button in disabled state has a CSS that prevents mouseover events from reaching the button element, and that there are workarounds for this.

What am I doing wrong in the below code?

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

2

Answers


  1. Try this code:

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

    Changes I made to your code:

    • Added a wrapper div to the button, so the wrapper can show the tooltip

    • You was added pointer-events: none to the wrong class. Corrected it.

    • In javascript code, it should be data-bs-toggle not data-toggle.

    Login or Signup to reply.
  2. As per the documentation:

    Elements with the disabled attribute aren’t interactive, meaning
    users cannot focus, hover, or click them to trigger a tooltip (or
    popover). As a workaround, you’ll want to trigger the tooltip from a
    wrapper <div> or <span>, ideally made keyboard-focusable using
    tabindex="0", and override the pointer-events on the disabled
    element.

    Example quoting from the documentation itself:

    <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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search