HTML Popover Problem

Topic: HTML Popover Problem

frank.szilinski@esentri.com pro asked 6 years ago

I am using the Angular Tooltip HTML Component to display dynamic HTML when hovering over.

<ng-template #popTemplate><div [innerHtml]="html"></div></ng-template>

<span [mdbTooltip]="popTemplate" placement="right" class="fa fa-info-circle float-right"></span>

my html is <h5>Bla Bla bla Bla</h5>

My first problem is that the popover breaks the line after every space. I can't use   because the content I am displaying is dynamic.

My second problem is that the popover seems to be hidden under some of my components, e.g. buttons. Is it possible to declare something like 'always on top' for the popover so its always visible, no matter in which environment it's displayed?

Sincerely

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

For the issue with tooltip being under image - I didn't saw any problem in my app. Tooltip is always on top, so maybe something isn't okay with your z-index? I'm providing another screenshot of my components.
<div>
<pre>private customer: any = {name: 'Booooooooooooooooob', note: 'Lorem ipsum dolor, sit amet t doloribus veritatis. Dolor neque porro vel, deserunt nostrum'};</pre>
<div>
<div>
<pre>this.html = `<h5>${this.customer.name}</h5> <br> <p>${this.customer.note}</p>`;</pre>
</div>
</div>
</div>
<div><a href="https://mdbootstrap.com/wp-content/uploads/2018/02/Screenshot_20180215_135459.png"><img class="alignnone size-full wp-image-52982" src="https://mdbootstrap.com/wp-content/uploads/2018/02/Screenshot_20180215_135459.png" alt="" width="304" height="698" /></a></div>
<div>Best Regards,</div>
<div>Damian</div>
<div></div>

Please insert min. 20 characters.

Dear Frank, For me, everything is working okay. About this line wrapping: In customer.name with <h5> tag, I have line-break after 16 characters, and in note with <p> tag, my line-break affects after 29 characters. It's proper behavior, because tooltip can't resize width for infinity. For the issue with tooltip being under image - I didn't saw any problem in my app. Tooltip is always on top, so maybe something isn't okay with your z-index? I'm providing another screenshot of my components.

private customer: any = {name: 'Booooooooooooooooob', note: 'Lorem ipsum dolor, sit amet t doloribus veritatis. Dolor neque porro vel, deserunt nostrum'};

this.html = `<h5>${this.customer.name}</h5> <br> <p>${this.customer.note}</p>`;

Best Regards,

Damian

Add comment

frank.szilinski@esentri.com pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

My HTML:

<ng-template #popTemplate>Here we go:

  <div [innerHtml]="html"></div>

</ng-template>

<span class="fa fa-info-circle" [mdbTooltip]="popTemplate" mdbRippleRadius placement="right"></span>

My Component:

public html;

ngOnInit() {
  this.html = `<h5>${this.customer.name}</h5> <br> <p>${this.customer.note}</p>`;
}

Still looks like this

I am wrapping the popovercomponentcode in my personal Angular Component so I can use it everywhere again and again

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hello frank.szilinski,

Are you sure, that you're doing everything right with our documentation? I've pasted example code from popover with dynamic html and tooltip with dynamic html.

No one your problem exists in my code. Look at screenshot which i add below.

Look at my code and try to use it in your's application.
<div>
<pre><div style="margin-top: 100px !important"></div>

<button type="button" class="btn btn-success waves-light" mdbRippleRadius>Button 1</button>

<button type="button" class="btn btn-success waves-light" mdbRippleRadius>Button 2</button>

<button type="button" class="btn btn-success waves-light" mdbRippleRadius>Button 31</button>

<button type="button" class="btn btn-success waves-light" mdbRippleRadius>Button 4</button>

<ng-template #popTemplate>Here we go:

</ng-template>

Show me tooltip with HTML

</button>

<ng-template #popTemplate>Here we go:

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

</div></pre>
<a href="https://mdbootstrap.com/wp-content/uploads/2018/02/Screenshot_20180215_111033.png"><img class="alignnone size-full wp-image-52965" src="https://mdbootstrap.com/wp-content/uploads/2018/02/Screenshot_20180215_111033.png" alt="" width="1315" height="219" /></a></div>
Best Regards,

Damian

Please insert min. 20 characters.

Hello frank.szilinski, Are you sure, that you're doing everything right with our documentation? I've pasted example code from popover with dynamic html and tooltip with dynamic html. No one your problem exists in my code. Look at screenshot which i add below. Look at my code and try to use it in your's application.

<div style="margin-top: 100px !important"></div>

<button type="button" class="btn btn-success waves-light" mdbRippleRadius>Button 1</button>

<button type="button" class="btn btn-success waves-light" mdbRippleRadius>Button 2</button>

<button type="button" class="btn btn-success waves-light" mdbRippleRadius>Button 31</button>

<button type="button" class="btn btn-success waves-light" mdbRippleRadius>Button 4</button>

<div class="row">

<ng-template #popTemplate>Here we go:

<div [innerHtml]="html"></div>

</ng-template>

<button type="button" class="btn btn-success waves-light" [mdbTooltip]="popTemplate" mdbRippleRadius>

Show me tooltip with HTML

</button>

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

</div>

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

frank.szilinski@esentri.com

Pro User 10Support score
2Questions 1Answers 0Snippets