HTML Popover Problem

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: HTML Popover Problem

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

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

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


                                                                                    

                                                                                
                                        

                                                                                                                                                                                                                                    

                                                                                                            
                                                                                                    

                                                                                    

                                        
                                    

                                                                                                        

                                
                                                                                                        
                            

                                
                                

                                    

                                        
                                        
                                        
                                        
                                    

                                

                                
                                
                                

                                    
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

                                                                    
                

                            
                        

                


                    
                    

                        frank.szilinski@esentri.com
                    

                    
                    
                    

                    
                    
                                            Pro User
                                                            
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    10Support score
                    

                    2Questions
                    1Answers
                    

                    
                    

                    0Snippets likes
                    0Snippets