Popover Not Showing directional arrow

avf456 pro asked a year ago

Hi Guys!

I am trying to implement the popover component, which is very similar to the tooltip component, but when i do, everything shows correctly except the arrow that can be either top, bottom, left, or right.

I checked the docs, and in the example it works, but when i copy and paste it into my project the arrow is missing, could you guys confirm the scss is correct and if so, could you share an example that i can try in my project?

This is the code i am using is exactly the same as the example page,


Dawid Adach pro premium answered a year ago

Hi there,

Please find below hotfix for the issue, we will include that within next release , please replace content of the following file


with following content:

import { ChangeDetectionStrategy, Input, Component, HostBinding, OnInit } from '@angular/core'; import { PopoverConfig } from './popover.config'; import { isBs3 } from '../utils/ng2-bootstrap-config'; @Component({ selector: 'mdb-popover-container', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <h3 class="popover-header" *ngIf="title">{{title}}</h3> <div class="popover-body"> <ng-content></ng-content> </div>` }) export class PopoverContainerComponent implements OnInit { @Input() public placement: string; @Input() public title: string; @HostBinding('class.show') show = '!isBs3'; @HostBinding('attr.role') role = 'tooltip'; @HostBinding('class') class; public get isBs3(): boolean { return isBs3(); } public constructor(config: PopoverConfig) { Object.assign(this, config); } ngOnInit() { this.class = 'popover-fadeIn popover in popover-' + this.placement + ' ' + this.placement + ' bs-popover-' + this.placement; } }


heath.frankel pro premium commented 2 months ago

We are still having this issue in V6.2.1 (ng-uikit-pro-standard-6.2.1). When will this fix be available?

heath.frankel pro premium commented 2 months ago

BTW we are just using the tooltip style from your library and the arrow is broken.

Damian Gemza commented 2 months ago

Dear heath.frankel
I tried to reproduce your case on Firefox 60 @ Ubuntu 18.04, and for me, arrows are visible.
Please check link: https://screenshots.firefox.com/HvtBaPbuNRZ1W0Fs/localhost
Could you specify your environment, on which you can't see the arrows?
Best Regards,

et3rnal commented 2 months ago

I have the same problem as heath in the "tooltip" (not the popover)

Damian Gemza commented 2 months ago

Problem with an invisible arrow in the tooltips will be fixed with the next release of MDB Angular.
Best Regards,

duong do commented 2 months ago

I have the same issue

Damian Gemza commented 2 months ago

Dear duong do,
This problem was fixed with 6.2.2 release of MDB Angular. Please update your project and check if arrows are visible.
Best Regards,

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No