Clever Geek Handbook

Popup tooltip about disabled button

I am trying to use Bootstrap tooltip on a disabled button to let the user know why the button is in this state. However, the fact that most browsers don't fire a click or hover event on a disabled element makes things difficult.

I am trying to wrap a button in a div and initialize the tooltip on that element as suggested by this solution I found around SO.

So, I am trying to do this:

<div id="disabled-button-wrapper" data-title="Tooltip title">
  <button class="btn btn-primary" disabled="disabled">Button</button>
</div>

<script>
    $(function() {
        $('#disabled-button-wrapper').tooltip();
    });
</script>

jsfiddle

But the tooltip doesn't work at all. In fact, not even because of the button, regardless of the content, the tooltip doesn't work on the wrapping div. What's going on here? What obvious details am I missing?

Edit: When checking with Chrome dev tools. I can actually see that the tooltip element is being created, but there are several problems:

  • It only fires when rotated to the right of the button: the div takes the full width (which by the way, I would like the parent to be as wide as the button). But not when you hover over the button.
  • The tooltip element is hidden somewhere and not displaying correctly.

Edit 2: I made some changes: jsfiddle

So the wrapper does not accept the full width and uses the body as a container to solve the rendering problem. Now there is only one problem: Why doesn't the wrapper hang when hovering over the part where the button is disabled?

+3


source to share


3 answers


If you really really check the jsfiddle you can see some css in there

  • to add some headroom so we can see the tooltip, which is at the top of the button by default

2.css which prevents buttons from blocking mouse events from being traversed



#disabled-button-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

#disabled-button-wrapper  .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

demo: https://jsfiddle.net/dLt2ed5w/6/

+2


source


How to enable tooltip when button is disabled?



$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
      

        
        
        
      

    
#disabled-button-wrapper {
  display: inline-block;
}

#disabled-button-wrapper .btn[disabled] {
  pointer-events: none;
}

#disabled-button-wrapper {
  cursor: not-allowed;
}
      

        
        
        
      

    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="disabled-button-wrapper" data-placement="right" data-toggle="tooltip" data-title="Tooltip title">
  <button class="btn btn-primary" disabled>Button</button>
</div>
Run codeHide result


+1


source


You need below CSS.

#disabled-button-wrapper .btn[disabled] {
  /* you need this line, not to block hover event from div */
  pointer-events: none;
}
#disabled-button-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

Explanation: -

You need to set pointer-events: none;

for the disabled button, the beacuse disable button actually blocks the event from its parent container, so you need to be told not to block the hover event originating from the container.

Demo

+1


source






More articles:


All Articles