I've been trying to get a tooltip on a disabled button in bootstrap. Well that didn't work. So here is the trick: overlay the disabled buttons with a div:
|
1 2 3 4 5 6 7 |
/** Tooltip doesn't want to work on the disabled buttons */ .tooltip-wrapper-sm { position:relative; z-index: 3; width:100%; height:30px; } |
|
1 2 3 |
$('.tooltip-wrapper-sm').tooltip({ placement : 'bottom' }); |
|
1 2 3 4 5 6 7 8 |
<div class="pull-right"> <div class="btn-group pull-right"> <button class="btn btn-default btn-sm" disabled="disabled">Hello</button> <button type="button" class="btn btn-default btn-sm" disabled="disabled"><span class="caret"></span></button> </div> <div class="tooltip-wrapper-sm"></div> <div class="clear"></div> </div> |
Here is the JSFiddle