This is a migrated thread and some comments may be shown as answers.

tooltip hover columns title of grid - how?

3 Answers 586 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Devi
Top achievements
Rank 1
Devi asked on 11 Apr 2018, 06:03 AM
I have a grid in angular, I would like to add a tooltip or title attribute (of html DOM) that will appear above each title and title of the columns in grid and will contain, the full text of columns title,
because sometimes the title of the column is long and partially displayed with 3 points. (For example: "Hello Worl..."),
How can I add it? Here is an example of my code in an HTML file:

<kendo-grid #grid="kendoGrid"
                [data]="gridView" id="GridID"
                [skip]="skip"
                [sortable]="{allowUnsort: true, mode: 'single'}"
                [resizable]="true"
                [sort]="sort"
                [scrollable]="{virtual: true}"
                (pageChange)="pageChange($event)"
                (sortChange)="sortChange($event)">

        <kendo-grid-messages noRecords="No rec">
        </kendo-grid-messages>

        <kendo-grid-column *ngFor="let item of gridColumnData" [headerClass]="'t-head'" [hidden]="item.hide" [field]="item.field" [title]="item.title">

        </kendo-grid-column>

    </kendo-grid>

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 12 Apr 2018, 01:51 PM
Hello Devi,

You can either use the Grid Header templates and provide DOM elements whose title property will point to the column title, e.g.:

https://plnkr.co/edit/bLl05XvEhaAljVlS2Iqk?p=preview

...or utilize the Popup component and its anchor property, e.g.

http://plnkr.co/edit/y5nruHRWFmsy7IMmLQW9?p=preview

We are also working on a dedicated Tooltip component that will be available in our next official release, scheduled for May, that will provide another alternative for displaying custom content in a tooltip, anchored to a specific DOM element.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
C
Top achievements
Rank 1
Iron
answered on 03 Feb 2021, 02:28 PM
Examples above on Plunker fail to load because of CORS errors when loading content from telerik.com
0
Dimiter Topalov
Telerik team
answered on 04 Feb 2021, 09:19 AM

Hi C,

The Plunker demos are rather outdated, the most straight-forward approach to view them in Stackblitz with the latest versions of our packages, is to view some of our documentation site demos in Stackblitz, and replace the app.component.ts code with the one from the Plunker, for example:

https://stackblitz.com/edit/angular-fhsk6l?file=app/app.component.ts

It is also worth mentioning that we released a dedicated Tooltip component that can be integrated with the Grid and configured to display the desired content as necessary:

https://www.telerik.com/kendo-angular-ui/components/tooltip/

https://www.telerik.com/kendo-angular-ui/components/tooltip/how-to/show-grid-cells-content/

Regards,
Dimiter Topalov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Devi
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
C
Top achievements
Rank 1
Iron
Share this question
or