Bootstrap tooltip issue

Question

Whatever I do my tooltip just shows beneath the relevant link.

I have the following style in my head:

<style>
/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}
</style>

Within the body I have:

<a class="test" href="#" data-toggle="tooltip" data-placement="top" title="ROUND">R</a>

At the bottom of everything I have:

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

I was trying to use the guide from:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tooltip_css&stacked=h

Any hints or tips would be great :)

Answer 1

You have to use the container option of tooltip with the body value :

 <button type="button" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="left" title="Tooltip on left" >Tooltip on left</button>

Take a look at the options array in the official doc : http://getbootstrap.com/javascript/#tooltips