Bootstrap Tooltip Extra Positions

Extend Bootstrap 3 Tooltip plugin by adding 4 extra positions: top-left, top-right, bottom-left, bottom-right.

Usage

HTML

Use the following values for the data-placement attribute:

• top-l - for top-left placement
• top-r - for top-right placement
• bottom-l - for bottom-left placement
• bottom-r - for bottom-right placement

Example:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top-l" title="Tooltip on top-left">Tooltip on top-left</button>

CSS

Include bootstrap-tooltip-extra-position.css in your project or use the .scss file:

<link rel="stylesheet" href="bootstrap-tooltip-extra-position.css" media="all" />

SASS:

@import "bootstrap-tooltip-extra-position";

Javascript

Include the script after Bootstrap's main javascript file:

<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip-extra-positions.js"></script>

Initialize the tooltips:

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

Demo

Codepen