Issue
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
Solution
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