How to flip Twitter Bootstrap's Tooltips

2019-04-08 23:16发布

问题:

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>

回答1:

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

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



回答2:

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.



回答3:

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"})