Link into popover content with trigger &quot;focus&q

Topic: Link into popover content with trigger "focus" not working

beachjf pro asked 6 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/

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear beachjf,

It's quite simple. You have to use our pre-configured dynamic HTML popover.

Use this code:
<pre class="code-toolbar language-markup"><code class=" language-markup">
<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></code></pre>
and this:
<div>
<pre>public html: string = '<a href="http://google.pl" target="_blank">google</a>';</pre>
<div></div>
</div>
This should fix your's problem. For me, it's works good.

Best Regards,

Damian

Please insert min. 20 characters.

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 6 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 6 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

beachjf

Pro User 10Support score
4Questions 3Answers 0Snippets