Bootstrap 4 tether placements

Question

Bootstrap 4 using tether.js as for positions, however it only support 4 position, "top" "right" "bottom" "left", how can I extend to more options which tether support 12 of them? example "top left" or "top right"

Answer 1

It seems that the bootstrap only accepts the 4 placement options - check the open github issue.

Currently bootstrap only supports 4 placement options, while tether supports 12.

So, using the bootstraps tooltip won't help you, but you can always use tether.js or it's tooltip.js.

Here's an example using tooltip.js:

new Tooltip({
  target: document.getElementById('foobar'),
  position: 'right middle',
  content: '<div id="foo">bar</div>',
});

#foo{
  background-color: black;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether-tooltip/1.2.0/css/tooltip-theme-arrows.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether-drop/1.4.2/js/drop.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether-tooltip/1.2.0/js/tooltip.min.js"></script>

<a href=# id="foobar">I'm a link!</a>

Also here's the fiddle