Topic: HTML Popover Problem

frank.szilinski@esentri.com pro asked 4 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 &nbsp; 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


Damian Gemza staff answered 4 years ago


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


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

Damian Gemza staff answered 4 years ago


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

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
Tags