当工具提示在 ng-bootstrap 中到达 y 轴上的某个点时，是不是可以更改工具提示的位置？

Posted 2023-03-21

【中文标题】当工具提示在 ng-bootstrap 中到达 y 轴上的某个点时，是不是可以更改工具提示的位置？

【英文标题】：Is it possible to change placement of the tooltip when it hits a certain point on the y-axis in ng-bootstrap?当工具提示在 ng-bootstrap 中到达 y 轴上的某个点时，是否可以更改工具提示的位置？

【发布时间】：2021-08-27 20:50:53

【问题描述】：

我的问题是我的工具提示显示在标题导航栏下方，但我希望它在工具提示框碰到标题时翻转到另一个位置（例如：'left-bottom'）。

是否可以在 ng-bootstrap 中手动设置工具提示的边界？ Vanilla Bootstrap api 有边界选项，我认为是为了限制工具提示的显示位置，但是 ng-bootstrap api 没有这个选项。

引导 API：https://getbootstrap.com/docs/5.0/components/tooltips/

ng-bootstrap api：https://ng-bootstrap.github.io/#/components/tooltip/api

我的代码如下所示：

<div triggers=" triggers " placement=" placement " ngbTooltip=" content "></div>

我正在考虑一个看起来像这样的实现，但我愿意接受建议：

<div triggers=" triggers " placement=" placement " ngbTooltip=" content " boundary=" top: 60px "></div>

我的项目有以下版本：

ng-bootstrap 版本 8.0.0

Angular 版本 10.0.5

【参考方案1】：

我找到了解决办法！这是使用自定义指令。

我根据需要编辑了这个自定义指令，它可以工作。

来源：Custom tooltip directive