How to add a Bootstrap tooltip to a checkbox?

Question

I've successfully added Bootstrap tooltips to a learning project I'm doing. So far only applied to link tags:

<a href="#" data-toggle="tooltip" data-original-title="My Popup text">
    Foobar
</a>

But I've got some checkboxes that need some explaining. I can't find any examples of Bootstrap tooltips for checkboxes. Is this a do-able thing?

If I have the following:

<label>
    <input type="checkbox" id="foo" /> Foobar
</label>

I tinkered a bit but got nowhere trying to add popups to the checkbox.

Suggestions?

Answer 1

This does not have any different method. Simply done like:

<input type='checkbox' data-toggle='tooltip' data-placement='right' data-original-title="tooltip here" class='checkbox'/>

Check if you make all tooltip element initialized via jQuery. Put this in the head:

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

And in case you didn't know, disabled checkboxes do not show tooltip. Also check if your checkboxes are disabled or not.