Link into popover content with trigger focus not working

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Link into popover content with trigger "focus" not working

beachjf pro asked 7 years ago

Here is an exemple of How i'm using popover <ng-template #popTemplate> <a href="http://google.com">Google</a> </ng-template> <a class="btn-floating btn-action m-0" href="javascript:void(0)" popoverTitle="google" [mdbPopover]="popTemplate" triggers="focus"> G </a> The popover show when I click the G button. However, when come the time to click on the google link IN the popover content, the popover dismiss it. I want to be able to dismiss the popover, but not when I'm clicking on a link in the content. I know with bootstrap, there is a way to allow HTML content to prevent this issue $("[data-toggle=popover]") .popover({html:true}) http://jsfiddle.net/vqT5f/2/

Damian Gemza staff answered 7 years ago

Dear beachjf, It's quite simple. You have to use our pre-configured dynamic HTML popover. Use this code: 

<ng-template #popTemplate>Here we go: <div [innerHtml]="html"></div></ng-template>
<button id="popTemplate" type="button" class="btn btn-success waves-light" popoverTitle="Dynamic html inside" [mdbPopover]="popTemplate" mdbRippleRadius>
  Show me popover with html
</button>
and this: 
public html: string = '<a href="http://google.pl" target="_blank">google</a>';
This should fix your's problem. For me, it's works good. Best Regards, Damian

beachjf pro commented 7 years ago

Hi Damian, are you able to click on your link ? On my case, when I click the link, nothing open and the popover close Thanks a lot for your time and support. JF

Damian Gemza staff commented 7 years ago

Hello beachjf, In my case i was able to click on this link and redirect to site http://google.pl Could you provide me your's environment informations? Os, browser, version of angular and mdb? Maybe there's the case. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
beachjf
Pro User
10Support score
4Questions 3Answers
0Snippets likes 0Snippets