Tooltip fails to work in data-column component

cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Active Member II

Tooltip fails to work in data-column component

Jump to solution

Hi,

I am using ADF 2.3.0 and ACS 5.2.1 to configure Data Column Component in Document list component.

Without column template, tooltip works just fine.

But when column template is provided for any data-column like

<data-column title="Name" key="name" class="full-width ellipsis-cell">
<ng-template let-value="value">
<span>{{ value }}</span>
</ng-template>
</data-column>

 or

<data-column title="Name" key="name" class="full-width ellipsis-cell">
<ng-template let-context="$implicit">
<span>{{context.row.getValue("custom_property")}}</span>
</ng-template>
</data-column>

the tooltip for that column does not show the value. Instead of showing the row value, it shows the title of the column(i.e., Name) in above case.

I even tried to use custom tooltip using formatTooltip function but it seems it does not work when column template is provided.

Can you help guide me here? Thanks.

1 Solution

Accepted Solutions
Highlighted
Active Member II

Re: Tooltip fails to work in data-column component

Jump to solution

Okay.. so here is how it worked.

<data-column title="Name" key="name">
<ng-template let-context="$implicit">
<span title="{{ context.row.getValue('custom_property') }}">{{ context.row.getValue('custom_property') }}</span>
</ng-template>
</data-column>

The "title" attribute in the <span> renders the tooltip. If this is not provided, by default the data-column 'title' is displayed.

This situation is only when custom template is used.

Denys Vuika‌ - Thanks for the guidance!

View solution in original post

4 Replies
Highlighted
Alfresco Employee

Re: Tooltip fails to work in data-column component

Jump to solution

Why not setting the "title" attribute for the span in your custom template?

Highlighted
Active Member II

Re: Tooltip fails to work in data-column component

Jump to solution

Hi Denys,

I am not sure if I understand that. Do we do something like this?

<data-column key="name" class="full-width ellipsis-cell">
<ng-template let-context="$implicit">
<span title="Name">{{context.row.getValue("custom_property")}}</span>
</ng-template>
</data-column>

because this does not work either.

Can you please elaborate on how we can achieve it?

Highlighted
Alfresco Employee

Re: Tooltip fails to work in data-column component

Jump to solution

When you override the template you need to evaluate and provide the tooltip as well

Highlighted
Active Member II

Re: Tooltip fails to work in data-column component

Jump to solution

Okay.. so here is how it worked.

<data-column title="Name" key="name">
<ng-template let-context="$implicit">
<span title="{{ context.row.getValue('custom_property') }}">{{ context.row.getValue('custom_property') }}</span>
</ng-template>
</data-column>

The "title" attribute in the <span> renders the tooltip. If this is not provided, by default the data-column 'title' is displayed.

This situation is only when custom template is used.

Denys Vuika‌ - Thanks for the guidance!

View solution in original post