Ejs-tooltip messing with styles

[Cesar Smerling]

Hello, I have a problem with the ejs-tooltip, the tooltip is creating <div> and mess with the css childs styles.

I want to add a tooltip to an list item in a ejs-listview, I have the list-content style applyied but when I sorround it with the ejs-tooltip, the list-content style class is not detected.

Code without the ejs-tooltip

<ng-template #itemTemplate let-filter>
    <div
        #element
        id="filter-item"
        class="e-list-wrapper e-list-avatar pr-1"
    >
        <span class="e-avatar e-avatar-small" style="background-color: transparent;"
            ><ejs-checkbox
                [checked]="selectedCustomFilter?.id === filter?.id"
                (change)="handleCustomFilterChange(filter, $event)"
            ></ejs-checkbox
        ></span>
        <div class="e-list-content py-1 pl-2 d-flex align-items-center">
            <span class="mr-4">{{ filter?.name }}</span>

            <span *ngIf="filter?.nodes && filter.nodes.length > 0">
                <ejs-tooltip [content]="'tooltip.HasNodes' | translate" position="TopCenter" target="#hasNodes">
                    <i id="hasNodes" class="fas fa-exclamation-circle"></i>
                </ejs-tooltip>
            </span>

            <div class="d-flex flex-nowrap ml-auto">
                <button
                    ejs-dropdownbutton
                    scs-dropdown
                    [items]="dropDownListActions"
                    (select)="handleDropDownAction($event, filter)"
                ></button>
            </div>
        </div>
    </div>
</ng-template>

Cod with the ejs-tooltip

<div
    #element
    id="filter-item"
    class="e-list-wrapper e-list-avatar pr-1"
    [ngClass]="{ 'loading-bg': (removingFilterId$ | async) === filter.id }"
>
    <span class="e-avatar e-avatar-small" style="background-color: transparent;"
        ><ejs-checkbox
            [checked]="selectedCustomFilter?.id === filter?.id"
            (change)="handleCustomFilterChange(filter, $event)"
        ></ejs-checkbox
    ></span>
    <ejs-tooltip target="#listItem" position="TopCenter" content="'CONTENT'">
        <div id="listItem" class="e-list-content py-1 pl-2 d-flex align-items-center">
            <span class="mr-4">{{ filter?.name }}</span>

            <span *ngIf="filter?.nodes && filter.nodes.length > 0">
                <ejs-tooltip [content]="'tooltip.HasNodes' | translate" position="TopCenter" target="#hasNodes">
                    <i id="hasNodes" class="fas fa-exclamation-circle"></i>
                </ejs-tooltip>
            </span>

            <div class="d-flex flex-nowrap ml-auto">
                <button
                    ejs-dropdownbutton
                    scs-dropdown
                    [items]="dropDownListActions"
                    (select)="handleDropDownAction($event, filter)"
                ></button>
            </div>
        </div>
    </ejs-tooltip>
</div>

Attached I add the screenshots of the style differences.

How can I attach an element to a tooltip without the need that element to the ejs-tooltip child html.

Thanks

Attachment: Desktop_d73dbf9d.zip

[Indhumathy Loganathan]

Hi Cesar, 

 

Thanks for contacting Syncfusion support. 

 

Based on your requirement, we have prepared a ListView sample which includes tooltip for list items without affecting the element styles. You can show tooltip on hovering listview items by setting tooltip target as list item class name(“e-list-item”). 

 

Please find the sample from below link. 

 

Sample: https://stackblitz.com/edit/angular-listview-tooltip?file=app.component.html 

 

You can modify the tooltip content using beforeRender event based on your requirement. Please refer to the below document link for more details on Tooltip. 

 

https://ej2.syncfusion.com/angular/documentation/tooltip/getting-started/ 

 

Please refer the following links to know more about the Angular ListView component. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/listview/getting-started/ 

 

Demos: https://ej2.syncfusion.com/angular/demos/#/material/listview/default 

  

API Reference: https://ej2.syncfusion.com/angular/documentation/api/list-view/ 

  

If we have misunderstood your query, please share us more details of your requirement. If possible, modify the above sample or provide us complete code snippet of ListView to replicate the issue. This detail would help us to understand your query and provide you the prompt solution. 

 

Please, let us know if you need any further assistance. 

  

Regards,  

Indhumathy L

[Cesar Smerling]

Hi!

With this I could make it work. Thanks

One more thing, is there a way in the beforeRender to render an angular component passing the list-item data as an input?

Thanks

[Indhumathy Loganathan]

Hi Cesar, 

 

We have validated your reported query. You can get the list item data inside beforeRender event through args.target and update this as tooltip content.  

 

Please refer to the below sample, 

 

https://stackblitz.com/edit/angular-listview-tooltip-lsrmca?file=app.component.html 

 

Currently we don’t have support to include Syncfusion angular component inside the Tooltip control. 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Indhumathy L