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:

ng-bootstrap 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


I found a solution! It was to use a custom directive.

I edited this custom directive to my needs and it works.

Source: Custom tooltip directive

Answered By – Maazil

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published