Search code examples
javascriptjqueryhtmltwitter-bootstraptooltip

Showing tooltip on disabled radio button bootstrap 3

I need to disable radio button as well as show tooltip on that disabled button too.

sample html code for disabled radio buttons with non working tooltip :

<div class="deliveryOption" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" name="options" id="option1"> Normal
    </label>
    <label class="btn btn-default disabled" data-toggle="tooltip" data-placement="top" title="some text">
        <input type="radio" name="options" id="option2"> Express
    </label>
</div>
Solution

  • It can be fixed using css. 'pointer-events:none' is preventing the tooltip to be displayed. add disabled property on input type radio as well.

    <label class="btn btn-default disabled" data-toggle="tooltip" data-placement="top" title="some text">
   <input type="radio" name="options" id="option2" disabled> Express
</label> 

.btn.disabled {
    pointer-events: auto;
 }