css - Change the position of Bootstraps ToolTips

Question

How can I specify the left-margin or position for twitter bootstraps tooltips? Right now, the tooltip I have is assigned to a link that's at the extreme left of the page, and half of the tooltip is invisible (appears outside the screens visible area).

I have also made the following changes to the bootstrap css code so that text appears on a single line rather than wrapped.

I'd like to move the tool tip a lot to the right, so text is visible.

.tooltip-inner {
  max-width: 200px;


.tooltip-inner {
  width: auto;

Answer 1

From the documentation

How to position the tooltip - top | bottom | left | right | auto.

When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.

Example:

<button class="btn btn-default" title="" data-placement="right"
data-toggle="tooltip" type="button" data-original-title="Tooltip on right"></button>