Search code examples
cssangularkendo-uikendo-gridkendo-ui-angular2

Kendo Angular tooltip position bottom triangle is overlapping

I am using the Kendo Angular tooltip. While the default positioning at the top works fine, I encounter an issue when positioning it at the bottom, as the tooltip triangle overlaps with the content. How can I fix this?

I

This tooltip I am using inside kendo grid. Attached code below:-

enter image description here

Solution

  • It's not reproducible on the default kendo grid + kendo tooltip with no additional styling, see https://stackblitz.com/edit/angular-xu6h4d?file=package.json,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts So it must be something wrong with your styles or setup. To debug this I would try:

    Option 1: disable all custom styles and try to reproduce on the default kendo theme, maybe you'll understand what happened.

    Option 2: Add [closable]="true" to the tooltip so you can inspect it in dev tools. Have a look at div with "k-callout k-callout-n" classes (that's the tooltip triangle) and try to understand why it's not in the right place.