Tooltip fails to work in data-column component

[anshu_kumar]

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.

[dvuika]

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

[anshu_kumar]

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?

[dvuika]

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

[anshu_kumar · Accepted 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!