CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
sindhugauri
sindhugauri

Reputation: 189

Tooltip not coming on bottom

I made a navbar and there is a green button. When the cursor hovers on it, I want a tooltip (at the bottom) to appear. However that is not happening. I used the following script:

$("[data-toggle="tooltip"]").tooltip();

A very strange thing happens. The tooltip is getting hidden underneath the navbar. Or so it seems. Can anybody help me with this? The following is the HTML code for the button (it is enclosed within the header tag):

<a id="ID" style="margin-right: 20px" class="btn btn-success" 
   data-placement="bottom" data-toggle="tooltip" href="#" 
   data-original-title="Tooltip on bottom">Has hover state</a>

Upvotes: 2

Views: 544

Answers (1)

Ofiris
Ofiris

Reputation: 6151

Fix your JavaScript quotes:

$("a[data-toggle='tooltip']").tooltip();

See this Plunker as reference, it has your markup and the fixed JavaScript.

Note that the .tooltip() is running after the DOM is ready with the relevant markup.

EDIT: After a long discussion in the comments, the solution was to add this to the CSS:

.tooltip{ position: fixed;}

Upvotes: 1

Related Questions