Problem with ng-bootstrap 14 tooltip in angular 15

Question

I'm upgrading an Angular project from 14 to 15, including ng-bootstrap from 13.1.1 to 14.1.0.

For the most part, the upgrade has gone smoothly, except for an issue around the tooltip component in ng-bootstrap. I've created a skinnied-down Stackblitz to demonstrate the problem:

https://stackblitz.com/edit/angular-fagut4

The issue appears to be this. If I create a component (standalone or otherwise) that has an ngbTooltip call inside of it, like this very simple example:

import { Component, Input } from '@angular/core';
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-tooltip-test',
  standalone: true,
  imports: [NgbTooltipModule],
  template: `
  <span [ngbTooltip]="tooltipText">HOVER ME</span>`,
})
export class NgbdTooltipTest {
  @Input() tooltipText!: string;
}

...and then I try call that component from a parent, like this:

before<ngbd-tooltip-test tooltipText="here is a tooltip"></ngbd-tooltip-test
  >text after

...then on hover, the after text is wrapping to the next line. This behavior didn't happen in Angular 14/ng-bootstrap 13.1.1.

The Stackblitz example has a root element of span, but I have changed it to both a and button, and I'm seeing the same results.

Either I'm missing something really silly here, or this is just broken now. Anybody else experiencing this?

Thanks in advance!

Daniel Gimenez · Accepted Answer · 2023-04-25 21:20:59Z

1

I've had problems like the before, so much so that I've gotten into the habit of automatically adding the attribute container="body" any time I use to ngbTooltip directive. Doing just that to your example made the problem going away. Alternatively to adding an attribute to each usage, this value can be set globally using the NgbTooltipConfig service.

If this isn't possible, I found after some experimentation that setting the css display property of the host element to contents also does this trick.

This could give a clue as to the issue, as initially the host's display property was inline. Given that the element added by the tooltip directive is a block element, an issue could be caused with rendering since inline elements aren't supposed to include block elements... though, I really can't say for sure if this is the case.

@Component({
  selector: 'ngbd-tooltip-test',
  standalone: true,
  styles: [':host { display: contents; }'],
  imports: [NgbTooltipModule],
  template: `
  <span [ngbTooltip]="tooltipText" [closeDelay]="600000">HOVER ME</span>`,
})

answered Apr 25, 2023 at 21:20

Daniel Gimenez

21.1k4 gold badges60 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hairbo Over a year ago

Oh, FFS. Thanks for this. I suppose the mystery is still why this worked pre-upgrade and now doesn’t.

hairbo Over a year ago

What's especially annoying about this is ng-bootstrap's documentation says nothing about the layout of the wrapped element being affected by the presence of absence of container="body"--only the tooltip itself.

Collectives™ on Stack Overflow

Problem with ng-bootstrap 14 tooltip in angular 15

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related