Is it possible to change placement of the tooltip when it hits a certain point on the y-axis in ng-bootstrap?

My problem is that my tooltip is displayed under the header nav-bar, but I want it to flip to another placement (ex: ‘left-bottom’) when the tooltip box hits the header.

Is it possible to manually set boundary for the tooltip in ng-bootstrap?
Vanilla Bootstrap api has the boundary option which I think is for limiting where the tooltip can be displayed, but the ng-bootstrap api doesnt have this option.

Bootstrap api: https://getbootstrap.com/docs/5.0/components/tooltips/

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

My code looks like this:

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

Im thinking of an implementation that looks something like this, but Im open to suggestions:

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

My project has these versions:

ng-bootstrap version 8.0.0

Angular version 10.0.5

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.