Bootstrap 4 系绳放置

Question

Bootstrap 4 使用 tether.js 作为位置，但是它只支持 4 个位置，“top”“right”“bottom”“left”，我怎样才能扩展到更多选项，tether 支持其中的 12 个？例如“左上”或“右上”

Answer 1

似乎引导程序只接受4 placement options - 检查打开的github issue。

目前 bootstrap 仅支持 4 个放置选项，而 Tether 支持 12 个。

因此，使用引导工具提示对您没有帮助，但您始终可以使用 tether.js 或 tooltip.js。

这是一个使用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>

这里也是the fiddle