Bootstrap tool tip on label not working

Question

When I hover over the label bootstrap tool tip does not work like the way on the javascript tool tip examples http://getbootstrap.com/javascript/#tooltips

I am trying to get my tool tip label to work on the same way as the top button tool tip example.

For some reason on my example it only shows the default way. How can I get my label to show tool tip like bootstrap tool tip top example?

My example http://codepen.io/riwakawebsitedesigns/pen/KhDAz

<div class="form-group required">
<label class="col-sm-2 control-label" for="input-url"><span data-toggle="tooltip" data-html="true" title="Test Tool Tip">URL</span></label>
<div class="col-sm-10">
<input type="text" name="config_url" value="" placeholder="" id="input-url" class="form-control" />
</div>
</div>

<br/><br/><br/>
Sample Button test.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

Answer 1

You need to import the bootstrap js first and then you can add the tooltip functionality in your javascript with $("[data-toggle='tooltip']").tooltip(); .

http://codepen.io/anon/pen/LewqF

Answer 2

The other answers are correct in saying you need this $('.btn-default, .test').tooltip() to make the tooltip work. However another problem you are having is that codepen includes jquery last, so your bootstrap js cannot attach itself to jquery so the .tooltip() function is not available when you try to call it.

Use something like bootply.com or jsfiddle.net instead because you have much greater control over js file inclusion and execution order.

Answer 3

You just need to add this code snippet in your JS

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