adjusting tooltip arrow

[Luc]

Hello,

I'm using the following custom code for tooltips:

01.$('#' + tooltipContainerDivId).kendoTooltip({
02.    filter: filter,
03.    position: 'right',
04.    animation: {
05.        open: {
06.            effects: 'fade:in',
07.            duration: 200
08.        },
09.        close: {
10.            effects: 'fade:out',
11.            duration: 200
12.        }
13.    },
14.    // Show tooltip only if the text of the target overflows with ellipsis.
15.    show: function() {
16.        var cWidth = computeElementWidth(this.content, tooltipWidthWorkaroundDivId);
17.        if (this.content.text().trim() !== '') {
18.            $('[role="tooltip"]').css({
19.                width: cWidth + 10,
20.                visibility: 'visible'
21.            });
22.        }
23.    },
24.    hide: function() {
25.        $('[role="tooltip"]').css('visibility', 'hidden');
26.    },
27.    // Apply additional custom logic to display the text of the relevant element only.
28.    content: function content(e) {
29.        var $element = $(e.target[0]);
30.        var cWidth = computeElementWidth($element, tooltipWidthWorkaroundDivId);
31.        var dataTooltipAttr = $element.attr('datatooltip');
32.
33.        if (cWidth > $element.width() || dataTooltipAttr) {
34.            // Text was truncated, or we have a custom tooltip message.
35.            if (dataTooltipAttr) {
36.                return dataTooltipAttr;
37.            }
38.
39.            return e.target.text();
40.        } else {
41.            return '';
42.        }
43.    }
44.});

The main reason for this is to display tooltip only if the text would be too short to fit within a grid cell.

This is working fairly well, the only major problem that we have with this is that the little arrow indicator is sometimes not aligned properly. If I remove this custom code, the arrow is always correctly aligned. I assume that internally there is some code that positions the arrow based on the box that kendo builds, but since I resize this box, the arrow is then positioned incorrectly.

What would be the proper way to solve my problem ? Is there already a way to perform the behaviour that I want ? the thing is there are also some cases where we always want to display the tooltip because it contains extra information not displayed in the cell, so I think that either way we need custom code.

Is there a way to override the way the arrow position is computed ?

As we can see on both the attached screenshots, the arrow's position is in both cases not quite right, and it seems to depend on what element I hovered previously, if I hover the element above I get something, and if I hovered the element below I get something else when I come back to that element from the attached screenshot.

Thanks !

 

[Misho]

Hello,

The supported positions of Kendo tooltip out of the box are bottom, top, left, right and center. 

Here is a smaple dojo example showing how to set tooltip position:

https://dojo.telerik.com/eKomaVen/2 

I've created it based on the following help article:

https://docs.telerik.com/kendo-ui/controls/layout/tooltip/how-to/show-on-length-condition 

Could you please provide a sample runnable dojo sample containing your implementation or modify the sample above so we could observe the issue on our side and do our best to provide you with a reliable solution?

Thank you for your collaboration.

Best Regards,
Misho
Progress Telerik

[Luc]

Hello,

 

I've adapted your example to show what we are doing. See https://dojo.telerik.com/eKomaVen/4

So the main changes are that for us all the lines in a grid are in one line, if they are too large we get ellipsis, and for that we usually want to display the full content in a one-liner (when possible) tooltip.

So in order to see the issue, you can hover the product names in turn, starting with Chai (no tooltip because it does not overlap), Chang (same), Aniseed Syrup (here we get the first tooltip and for me it's displayed properly), Chef Anton's cajun seasoning (this one has a tooltip too and it's poorly aligned), if you then hover the next entry Chef Anton's Gumbo Mix, you will see a more or less properly displayed tooltip, and if you go back hover Chef Anton's cajun seasoning, you will see that the tooltip looks different from the first time you hovered there.

Hopefully that shows you the issue in a better way and even more hopefully you can help me solve this problem :) So ideally I want the arrow to be always aligned with the box, so as in the "aniseed syrup" case.

[Misho]

Hello,

By default, if the content is too little, the Tooltip width is going to be reduced, and if the displayed content can fit, the Tooltip width is not going to change. Therefore, in some scenarios this results in a Tooltip that is narrower than desired. 

You could check the following article for calculating the content width:

https://docs.telerik.com/kendo-ui/controls/layout/tooltip/how-to/calculate-tooltip-width 

Here is a sample which demonstrates how to configure the tooltip for showing the text at one line on length condition:

https://dojo.telerik.com/UseTABuR/25

Best Regards,
Misho
Progress Telerik

[Luc]

thanks for the answer, that's doing what I wanted !

The documentation's https://docs.telerik.com/kendo-ui/controls/layout/tooltip/how-to/show-on-ellipsis is also basically what I was after, thanks for pointing that out, I didn't find it before.

[Misho]

Hi,

I'm glad that you managed to accomplish the desired scenario.

Best Regards,
Misho
Progress Telerik