I am using Twitter's Bootstrap to implement tooltips. Currently, the tooltips appear above the link. I would like the tooltip to appear underneath the link. How would I go about doing this?

I am triggering the tooltip and it clearly states "bottom" but it doesn't want to work for me...

<script>$('#home').tooltip('hide bottom')</script>

I am using Twitter's Bootstrap to implement tooltips. Currently, the tooltips appear above the link. I would like the tooltip to appear underneath the link. How would I go about doing this?

I am triggering the tooltip and it clearly states "bottom" but it doesn't want to work for me...

<script>$('#home').tooltip('hide bottom')</script>

• javascript
• css
• twitter-bootstrap
• tooltip

• can you show some type of code? – Scott Selby Commented Jul 19, 2012 at 19:35

4 Answers 4

$('#tooltip').tooltip({
    placement : 'left',
    title : 'first tooltip'
});

Use this inside <script> tags, or in a separate JavaScript file.

Assuming you're using the latest Bootstrap you would use the placement of "bottom". You can do this via the options when you create the tooltip: $("#tt").tooltip({placement: "bottom"}); or via the data attribute on the element: <span data-placement="bottom" ...>tooltip!</span> I believe.

You can find more information on the tooltip in the Bootstrap tooltip section.

on the bootstrap website they show options for the tooltips. one of the options is placement which can be set to top, bottom, right or left.

so when you add the script for your tooltip put the option like this

$('#example').tooltip({placement: "bottom"})

Bootstrap tooltip has a "placement" option. You can set it to "bottom" like this:

$('#home').tooltip({
    placement : "bottom"
});

See their official website for references (v.2.3.3) or (v.3).