Popover Not Showing directional arrow

MDB SupportCategory: MDB AngularPopover Not Showing directional arrow
avf456 Pro User asked 10 months ago in MDB pro, version:4

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,

thanks

1 Answers
Dawid Adach Pro UserPremium answered 10 months ago

Hi there,

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

/[mdb-pro-location]/free/popover/popover-container.component.ts

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;
 }
}

 

Damian Gemza replied 1 week ago

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

et3rnal replied 1 week ago

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

Damian Gemza replied 1 week 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,
Damian

heath.frankel Pro User replied 1 week ago

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

heath.frankel Pro User replied 1 week ago

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