Search code examples
ng-bootstrappopper.js

How to introduce offset to the tooltip component in ng-bootstrap?

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:

enter image description here

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!

Solution

  • Well, I hacked the scss now...

    .bs-tooltip-bottom {
  padding-top: .5rem;

  .tooltip-arrow {
    top: calc(.5rem - var(--bs-tooltip-arrow-height));
  }

}

    I'd preffer a working way of modify the options, but this does the trick as well.