cancel
Showing results for 
Search instead for 
Did you mean: 

Tooltip fails to work in data-column component

anshu_kumar
Star Contributor
Star Contributor

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

anshu_kumar
Star Contributor
Star Contributor

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 answer in original post

4 REPLIES 4

dvuika
Star Collaborator
Star Collaborator

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

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?

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

anshu_kumar
Star Contributor
Star Contributor

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!

Getting started

Explore our Alfresco products with the links below. Use labels to filter content by product module.

Welcome to the new Hyland Connect. Get started or submit feedback.