We are using angular 15 with ng-bootstrap 14.2. Somehow it is very hard to get some offset to a tooltip.
Here is a minimal stackblitz, which reproduces the issue: https://stackblitz.com/edit/angular-nj28pa?file=src%2Fmain.ts
This is what we want to achieve:
Our template:
<div class="members-list__member"
[class.me-3]="!standalone"
[ngbTooltip]="tooltip ? member.givenName + ' ' + member.familyName + (isYourContact ? ' (your contact)' : '') : null"
placement="bottom-start auto"
[closeDelay]="50"
triggers="hover focus click"
[popperOptions]="options"
>
<img ...>
</div>
And the options function of interest (this is a kind of guesswork from the existing modifiers and the offset modifier from the popper docu):
options(options) {
options.modifiers.push({
name: 'offset',
enabled: true,
phase: 'main',
options: {
offset: [10, 0]
}
});
return options;
}
However, this leads straight to an exception:
Unhandled Promise rejection: Cannot read properties of undefined (reading 'y') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'y')
at node_modules/@popperjs/core/lib/utils/detectOverflow.js:60:37
The ng-bootstrap examples are unfortunatley pretty silent about offset, so if sombeody has an idea what we are making wrong, it would be much appreciated!
Well, I hacked the scss now...
.bs-tooltip-bottom {
padding-top: .5rem;
.tooltip-arrow {
top: calc(.5rem - var(--bs-tooltip-arrow-height));
}
}
I'd prefer a working way of modify the options, but this does the trick as well.