Popover Not Showing directional arrow

Topic: Popover Not Showing directional arrow

avf456 pro asked 7 years 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, thanks

Add comment

Dawid Adach pro answered 7 years ago

0 0 Best answer

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:
<pre>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;
 }
}</pre>

Please insert min. 20 characters.

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

heath.frankel free commented 6 years 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 free commented 6 years ago

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

Damian Gemza staff commented 6 years 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

et3rnal free commented 6 years ago

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

Damian Gemza staff commented 6 years ago

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

duong do free commented 6 years ago

I have the same issue

Damian Gemza staff commented 6 years 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, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

avf456

Pro User 10Support score
4Questions 2Answers 0Snippets