CODEWITHSUNDEEP
angulartooltipag-gridangular9ag-grid-angular
nnn
nnn

Reputation: 41

Ag-grid custom tooltip position change

How to change the position of the custom tooltip? Example: always show in the upper right corner of the table

Currently always show below the cursor: pic1

I want to display it in the upper right corner of the table: pic2

Code example from the Ag-grid official website:

https://www.ag-grid.com/javascript-grid-tooltip-component/#example-custom-tooltip

Thanks for the help!

Ag-grid version: 23

Upvotes: 1

Views: 6930

Answers (1)

AliF50
AliF50

Reputation: 18879

There is a tooltip-component where the styles are automatically added by Ag-Grid.

Try adding the following CSS:

.ag-tooltip-custom {
  top: 5px !important;
  right: 14px !important;
  left: auto !important;
}

!important is important because we need to override the style given to the tooltip-component.

In the picture I have added to .ag-popup-child but you should add it to .ag-tooltip-custom. You can also play around with the numbers.enter image description here

enter image description here

Upvotes: 2

Related Questions