How to set/active bootstrap tooltip using javascript?

Question

I'm so frustrated that I cannot solve this simple question. How to programmingly set/active bootstrap tooltip?

For example, we are at page: http://getbootstrap.com/2.3.2/javascript.html#tooltips and let's open the chrome console and make tooltip work on the fly on the 'home' link in the left up corner.

var home = $($('.navbar li a')[0]);// select that home link
home.tooltip({title:'wthhhh'}); // set the default title
home.tooltip('show');

Step 3 doesn't bring up the tooltip.

Any help?

EDIT: I understand bootstrap has got a major update, but I believe it's irrelevant. Tooltip doesn't seem change.

Answer 1

By default bootstrap's tooltip is placed on top of the element, and since you're selecting the top nav bar, it's appearing off the screen - you can't really see it, but it's there.

If you change the tooltip placement from top (default) to bottom you will be able to see it correctly:

var home = $($('.navbar li a')[0]);
home.tooltip({title: 'wthhhh', placement: 'bottom'})
home.tooltip('show');