Search code examples
angularbootstrap-4ng-bootstrap

NgbTooltip not showing the arrow div ( ▼ ) inside NgbPopover Window

It seems that the arrow div doesn't work inside NgpPopover body because of conflicting arrow classes for NgbPopover's div.arrow and NgbTooltip's div.arrow. Looks like this is a problem in ng-bootstrap with bootstrap v4 but can be resolved by updating to the new bootstrap v5.

However, If we can get a workaround for this then it will be very convenient for teams to get this issue fixed temporarily.

See the stackblitz example to recreate this issue.

Versions:

{
   "@angular/core": "~11.2.14",
   "@ng-bootstrap/ng-bootstrap": "^9.1.1",
   "bootstrap": "^4.6.0"
}

enter image description here

Solution

  • If you don't want to upgrade, as a workaround you can define a custom tooltipClass for your tooltip:

    <ng-template #popoverContent>
  <div class="d-flex align-items-center justify-content-center" style="width: 200px; height: 200px;">
    <button ngbTooltip="Tooltip with missing arrow 😒" tooltipClass="my-custom-class" [closeDelay]="2000000"> Button inside Popover Window</button>
  </div>
</ng-template>

    and in the CSS you can define this which will override the transparent border-color that is being applied by the popover CSS:

    ::ng-deep .my-custom-class .arrow::before {
  border-top-color: black;
}

    enter image description here

    Please see this StackBlitz for a demo.