使用AngularJS自动定位工具提示

Posted 2023-02-19

【中文标题】使用AngularJS自动定位工具提示

【英文标题】：Auto positioning of tooltip using AngularJS

【发布时间】：2015-10-25 06:06:19

【问题描述】：

我想自动定位我的工具提示，就像我在浏览器滚动条的顶部，并且第一行有一个带有工具提示的链接，那么工具提示必须显示在底部中间。

有没有办法只使用 angularjs 来做到这一点？

我正在使用 angular-ui-bootstrap

<a href="#" tooltip-template="'tool.html'" tooltip-class="customclass">My template</a>
<style>
    .tooltip.customclass .tooltip-inner 
        color: #414141;
        background-color: #f1f1f1;
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
    
    .tooltip.customclass .tooltip-arrow 
        display: none;
</style>
<script type="text/ng-template" id="tool.html">
    <span>Special Tooltip with <strong>markup</strong></span>
</script>`

【问题讨论】：

你可以试试 tooltip-placement="top" tooltip-append-to-body="true"

试过了。它不起作用，如果我的链接在顶部，那么工具提示是不可见的。

【参考方案1】：

我们正在通过https://github.com/angular-ui/bootstrap/issues/375 跟踪此问题，目前没有编码解决方案。但是，请随时订阅该问题以获取更新，也请参阅上述问题中的this link 以了解解决方法。

使用 Bootstrap 4 可能会有些棘手，因为它们添加了对 Tether 库的依赖项。如果我们支持它，我们还有更多的研究要做，以确定这将如何影响我们的库大小。