Bootstrap Tooltip Extended Plugin

Additional Positions

The plugin BS Tooltip Extended adds 4 extra positions for Bootstrap Tooltip: top-left, top-right, bottom-left and bottom-right.

Demo

Tooltip on top-left Tooltip on top-right

Tooltip on bottom-left Tooltip on bottom-right

RTL Support

When "auto-dir" is specified and page direction is RTL (right-to-left language), it will automatically reverse the horizontal placement of the tooltip.

For example, if placement is auto-dir right, the tooltip will display to the right (default direction is "ltr"), otherwise it will display to the left if the overall document direction is right-to-left (html tag has attribute dir="rtl").

> Tooltip <

<a href="#" data-toggle="tooltip" data-placement="auto-dir right" title="Tooltip on right (left in RTL)">Tooltip</a>

HTML

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top-left" title="Tooltip on top-left">
  Tooltip on top-left
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top-right" title="Tooltip on top-right">
  Tooltip on top-right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom-left" title="Tooltip on bottom-left">
  Tooltip on bottom-left
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom-right" title="Tooltip on bottom-right">
  Tooltip on bottom-right
</button>

CSS

.tooltip.top-left,
.tooltip.top-right {
	margin-top: -3px;
	padding: 5px 0;
}
.tooltip.bottom-left,
.tooltip.bottom-right {
	margin-top: 3px;
	padding: 5px 0;
}
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: black;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: black;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: black;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: black;
}