1

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"

max li
  • 2,417
  • 4
  • 30
  • 44
  • how do you use it on bootstrap? this returns an error. – max li Jun 09 '16 at 08:40
  • Note that Bootstrap is [moving away from Tether](https://github.com/twbs/bootstrap/pull/22444), with the new implementation. I [raised your issue](https://github.com/twbs/bootstrap/pull/22444#issuecomment-296376275) in the relative PR. – Fez Vrasta Apr 22 '17 at 14:19

1 Answers1

0

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

Vucko
  • 20,555
  • 10
  • 56
  • 107