How to enable Bootstrap tooltip on disabled button

Question

I need to display a tooltip on a disabled button and remove it on an enabled button  Currently  it works in reverse   What is the best way to invert this behaviour    x000D   x000D      rel tooltip    tooltip    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt hr gt  x000D   lt button class  btn  disabled rel  tooltip  data-title  Dieser Link f  hrt zu Google  gt button disabled lt  button gt  x000D   lt button class  btn  rel  tooltip  data-title  Dieser Link f  hrt zu Google  gt button not disabled lt  button gt  x000D   x000D   x000D    Here is a demo  P S   I want to keep the disabled attribute

User · Answer

You can wrap the disabled button and put the tooltip on the wrapper:

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

If the wrapper has display:inline then the tooltip doesn't seem to work. Using display:block and display:inline-block seem to work fine. It also appears to work fine with a floated wrapper.

UPDATE Here's an updated JSFiddle that works with the latest Bootstrap (3.3.6). Thanks to @JohnLehmann for suggesting pointer-events: none; for the disabled button.

http://jsfiddle.net/cSSUA/209/

User · Answer

If you re desperate  like i was  for tooltips on checkboxes  textboxes and the like  then here is my hackey workaround      input disabled  button disabled   after function  e        d       lt div gt         i     this       d css           height  i outerHeight            width  i outerWidth            position   absolute              d css i offset         d attr  title   i attr  title         d tooltip        return d        Working examples  http   jsfiddle net WB6bM 11   For what its worth  I believe tooltips on disabled form elements is very important to the UX  If you re preventing somebody from doing something  you should tell them why

User · Answer

You can t get the tool-tip to show on a disabled button  This is because disabled elements don t trigger any events  including the tool-tip  Your best bet would be to fake the button being disabled  so it looks and acts like its disabled   so you can then trigger the tool-tip   Eg  Javascript       rel tooltip  disabled   tooltip         rel tooltip  disabled   bind  click   function         return false        Instead of just     rel tooltip    tooltip      HTML    lt hr gt   lt button class  btn disabled  rel  tooltip  data-title  Dieser Link f  hrt zu Google  gt button disabled lt  button gt    lt button class  btn  rel  tooltip  data-title  Dieser Link f  hrt zu Google  gt button not disabled lt  button gt    JSFiddle  http   jsfiddle net BA4zM 75

User · Answer

This can be done via CSS  The  pointer-events  property is what s preventing the tooltip from appearing  You can get disabled buttons to display tooltip by overriding the  pointer-events  property set by bootstrap    btn disabled       pointer-events  auto

User · Answer

These workarounds are ugly  I ve debugged the problem is that bootstrap automatically set CSS property pointer-events  none on disabled elements   This magic property causes that JS is not able to handle any event on elements that matches CSS selector   If you overwrite this property to default one  everything works like a charm  including tooltips    disabled     pointer-events  all  important      However you shouldn t use so general selector  because you will probably have to manually stop JavaScript event propagation way you know  e preventDefault

User · Answer

In my case  none of the above solutions worked  I found that it s easier to overlap the disabled button using an absolute element as    lt div rel  tooltip  title  I workz  class  wrap  gt     lt div class  overlap  gt  lt  div gt     lt button gt I workz lt  button gt   lt  div gt    lt div rel  tooltip  title  Boo    class  wrap poptooltip  gt     lt div class  overlap  gt  lt  div gt     lt button disabled gt I workz disabled lt  button gt   lt  div gt    wrap     display  inline-block    position  relative      overlap     display  none     poptooltip  overlap     display  block    position  absolute    height  100     width  100     z-index  1000      Demo

User · Answer

pointer-events  auto  does not work on an  lt input type  text    gt    I took a different approach  I do not disable the input field  but make it act as disabled via css and javascript   Because the input field is not disabled  the tooltip is displayed properly  It was in my case way simpler than adding a wrapper in case the input field was disabled    x000D   x000D    document  ready function      x000D        disabled data-toggle  tooltip     tooltip    x000D        disabled   mousedown function event   x000D      event stopImmediatePropagation    x000D      return false  x000D        x000D      x000D  input type text  disabled  x000D    cursor  default  x000D    margin-top  40px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 3 3 js tether min js  gt  lt  script gt  x000D   lt link href    maxcdn bootstrapcdn com bootstrap 3 3 1 css bootstrap min css  rel  stylesheet  gt   x000D   lt script src    maxcdn bootstrapcdn com bootstrap 3 3 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt input type  text  name  my field  value  100  class  disabled  list  values z1  data-toggle  tooltip  data-placement  top  title  this is 10 10  gt  x000D   x000D   x000D

User · Answer

This is what myself and tekromancr came up with   Example element    lt a href  http   www google com  id  btn  type  button  class  btn btn-disabled  data-placement  top  data-toggle  tooltip  data-title  I m a tooltip  gt Press Me lt  a gt    note  the tooltip attributes can be added to a separate div  in which the id of that div is to be used when calling  tooltip  destroy    or  tooltip     this enables the tooltip  put it in any javascript that is included in the html file  this line might not be necessary to add  however   if the tooltip shows w o this line then don t bother including it       element id   tooltip      destroys tooltip  see below for usage       element id   tooltip  destroy      prevents the button from being clickable  because the disabled attribute is not being used  this is necessary  otherwise the button would still be clickable even though it  looks  as if it is disabled       element id   click    function evt       if    this  hasClass  btn-disabled            evt preventDefault          return false                Using bootstrap  the classes btn and btn-disabled are available to you  Override these in your own  css file  you can add any colors or whatever you want the button to look like when disabled  Make sure you keep the cursor  default  you can also change what  btn btn-success looks like    btn btn-disabled      cursor  default      add the code below to whatever javascript is controlling the button becoming enabled       element id   removeClass  btn-disabled        element id   addClass  btn-success        element id  tooltip  destroy      tooltip should now only show when the button is disabled   if you are using angularjs i also have a solution for that  if desired

User · Answer

If it helps anyone  I was able to get a disabled button to show a tooltip by simply putting a span inside it and applying the tooltip stuff there  angularjs around it      lt button ng-click   ctrl onClickDoThis            ng-disabled    ctrl selectedStuff length  gt     lt span tooltip-enable    ctrl selectedStuff length          tooltip-append-to-body  true          uib-tooltip  Select at least one thing to enable button   gt      My Butt    lt  span gt   lt  button gt

User · Answer

You can simply override Bootstrap s  pointer-events  style for disabled buttons via CSS e g    btn disabled     pointer-events  all  important      Better still be explicit and disable specific buttons e g    buttonId disabled     pointer-events  all  important

User · Answer

Simply add the disabled class to the button instead of the disabled attribute to make it visibly disabled instead    lt button class  btn disabled  rel  tooltip  data-title  Dieser Link f  hrt zu Google  gt button disabled lt  button gt    Note  this button only appears to be disabled  but it still triggers events  and you just have to be mindful of that

User · Answer

Here is some working code  http   jsfiddle net mihaifm W7XNU 200      body   tooltip       selector    rel  tooltip             btn   click function e        if      this  hasClass  disabled                      disabled   removeClass  disabled   attr  rel   null              this  addClass  disabled   attr  rel    tooltip                The idea is to add the tooltip to a parent element with the selector option  and then add remove the rel attribute when enabling disabling the button

User · Answer

For Bootstrap 3  HTML   lt button      class  btn btn-success       disabled     data-hint  Enabled  gt     lt div class  sp-btn-overlap  data-hint  Disabled  gt  lt  div gt    Submit button  lt  button gt    CSS  button   position relative      sp-btn-overlap        position absolute       top 0       left 0       height 100        width 100        background none       border none       z-index 1900      JS     button  sp-btn-overlap        popover           trigger   hover           container   body           placement   bottom           content  function                 return   this  parent   prop  disabled                           this  data  hint                           this  parent   data  hint                                 x000D   x000D     button  sp-btn-overlap   x000D     popover   x000D      trigger   hover   x000D      container   body   x000D      placement   bottom   x000D      content  function     x000D        return   this  parent   prop  disabled   x000D                        this  data  hint   x000D                        this  parent   data  hint      x000D        x000D  button   x000D    position relative     important     x000D    x000D   x000D   sp-btn-overlap   x000D    position absolute  x000D    top 0  x000D    left 0  x000D    height 100   x000D    width 100   x000D    background none  x000D    border none  x000D    z-index 1900  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt button disabled class  btn btn-default  data-hint  Enabled  gt  x000D     lt div class  sp-btn-overlap  data-hint  Disabled  gt  lt  div gt  x000D    Disabled button x000D   lt  button gt  x000D   x000D   lt button class  btn btn-default  data-hint  Enabled  gt  x000D     lt div class  sp-btn-overlap  data-hint  Disabled  gt  lt  div gt  x000D    Enabled button x000D   lt  button gt  x000D   x000D   x000D

User · Answer

I finally solved this problem  at least with Safari  by putting  pointer-events  auto  before  disabled   The reverse order didn t work

User · Answer

Try this example   Tooltips must be initialized with jQuery  select the specified element and call the tooltip   method in JavaScript     document  ready function              data-toggle  tooltip     tooltip          Add CSS    tool-tip     display  inline-block      tool-tip  disabled      pointer-events  none      And your html    lt span class  tool-tip  data-toggle  tooltip  data-placement  bottom  title  I am Tooltip  gt       lt button disabled  disabled  gt I am disabled lt  button gt   lt  span gt

User · Answer

Working code for Bootstrap 3 3 6  Javascript      body   tooltip     selector    data-toggle  tooltip             btn   click function e     if    this  hasClass  disabled        e preventDefault             CSS   a btn disabled  fieldset disabled  a btn     pointer-events  auto

User · Answer

Based on Bootstrap 4     Disabled elements   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  or   ideally made keyboard-focusable using tabindex  0   and override the pointer-events on the disabled element     lt span class  d-inline-block  tabindex  0  data-toggle  tooltip  title  Disabled tooltip  gt     lt button class  btn btn-primary  style  pointer-events  none   type  button  disabled gt Disabled button lt  button gt   lt  span gt    All the details here  Bootstrap 4 doc

User · Answer

You can imitate the effect using CSS3   Simply take the disabled state off the button and the tooltip doesn t appear anymore   this is great for validation as the code requires less logic   I wrote this pen to illustrate   CSS3 Disabled Tooltips   disabled       amp  disabled-tooltip        cursor not-allowed      position  relative       amp  hover          amp  before           content             border 5px solid transparent          border-top 5px solid black          position  absolute          left  50           transform  translate -50   calc -100    -5px                   amp  after           content  attr disabled-tooltip           position  absolute          left  50           transform  translate -50   calc -100    -15px            width 280px          background-color black          color white          border-radius 5px          padding 8px 12px          white-space normal          line-height 1                           lt button type  button  class  btn btn-primary  disabled-tooltip  I am a disabled tooltip using CSS3   You can not click this button   disabled gt Primary Button lt  button gt

[javascript] How to enable Bootstrap tooltip on disabled button?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-tooltip