Tooltip does not hide when element is hidden

[Dan]

I have a grid where I have some buttons with icons for every row. For those buttons I need to display some tooltips. To do this I am using the kendo tooltip however when the user hovers the button and after the tooltip is displayed the user clicks on the button, the button is hidden but the tooltip is still shown.

How can I close the tooltip when the element is no longer visible on the screen?

[Neli]

Hi Dan,

Could you please confirm if the Tooltip autoHide option is set on your end? I have tested locally and when the autoHide is not set (its default value is true) the Tooltip gets hidden once a custom command is clicked. Here is a Dojo example based on the provided information. 

If this is not the exact scenario, please provide a little bit more information about the implementation on your side, so I could understand the issue better and advise you further.

Regards,
Neli
Progress Telerik

[Dan]

Hi Neli,

The autoHide property is not set and from what I see on the documentation is by default true. Also the creation of the tooltip is done differently like: 

$("#treeList").kendoTooltip({
            filter: ".k-grid-edit",
            content: "Edit"
         }).data("kendoTooltip");

And as you can see from the configuration in the same space another button appears (the update button which is configured in the same manner)

$("#treeList").kendoTooltip({
            filter: ".k-grid-update",
            content: "Update"
         }).data("kendoTooltip");

I should mention that we are still using the kendo version 2021.2.511

[Neli]

Hi Dan,

I have tested locally by adding 'Edit' and 'Update' buttons in the Grid and I configured the Tooltips as in the provided snippet. On my end when the 'Edit' button is hovered its Tooltip appears. Once the button is clicked it is replaced by the 'Update' button and the Tooltip is changed respectively. Here is the Dojo example. Am I missing something?

May I ask you to modify the Dojo example in order to replicate the behavior the way it is on your side and send it back? This was I could take a closer look and advise you further. 

[Dan]

Hi Neli,

It seems that I was wrong and I do not have a grid but a treelist. They look the same and forgot that the pages with the problem is a tree list

Here is the dojo for it

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

Please make sure that the height of the row is the same also on edit to see that the Edit tooltip remains instead of the Update tooltip

 

[Neli]

Hi Dan,

You could try to hide the Tooltip when the 'Edit' command in the Treelist is selected. You could subscribe to the edit event of the widget and use the Tooltip hide() method, or hide the element using jQuery hide(). Below is an example:

 edit: function(e){            
           $('#treelist').data('kendoTooltip').hide()
           $('.k-tooltip').hide()
},

Here is the modified Dojo

I hope this helps.

Regards,

Neli

[Dan]

Hi Neli,

The solution is not general enough to solve all my problems. For instance I have tooltip on all the buttons so for instance if I press cancel while having the tooltip visible, it does not disappear and I get the tooltip for Cancel on the Delete button. 

Should I understand that using tooltip on TreeList is not encouraged since its not working with the current framework?

[Neli]

Hi Dan, 

You could hide the Tooltip also when a command button is clicked. For example, you could subscribe to the dataBound event of the TreeList. In the event handler, you could bind a click event to the command buttons. Below is an example:

dataBound: function(){              
         $('.k-button[data-command]').on('click', function(){
                $('#treelist').data('kendoTooltip').hide()  
                $('#treelist_tt_active').hide()
         })
 },

Here is the modified Dojo.

I hope the provided suggestion will be helpful for resolving the issue.

Regards,

Neli

 

[Dan]

Hi Neli,

So your solution does not satisfy my requirements. While doing some tests on a grid I noticed that when I edit a row having the edit tooltip visible, the button is replaced by the update button and also the tooltip (this is the desired functionality). However if I move to the cancel button the edit tooltip remains there. 

So it seems that I was right in saying that using tooltip on TreeList and Grid should be avoided since they do not work out of the box and specific methods have to be implemented on every TreeList and Grid.

[Neli]

Hi Dan,

I have tested the Tooltip behavior when used for Grid commands. I am not aware of the Grid configuration on your side, however, no additional modifications are required on my side, when the Tooltip is configured as follows:

 

$("#grid").kendoTooltip({
            filter: ".k-button-icontext",
            content: function(e){              	
            		return e.target.text()
            }
});

 

Here is a Dojo example where this is demonstrated.

You could use also a similar approach in the TreeList. However, the content of the Tooltip needs to be refreshed when the content of the targeted button is changed:

 

 edit: function(e){            
       $('#treelist').data('kendoTooltip').refresh()             
},
cancel: function(e){ 
      setTimeout(function(){
           $('#treelist').data('kendoTooltip').refresh()
      })
}, 

Here is a modified Dojo where the above is implemented.

Could you please try the approach described above and let me know if it is suitable for your scenario.

Regards,

Neli

[Dan]

Hi Neli,

So basically I just need to filter in the content further my buttons and get the right Tooltip for the button, add edit and delete button.

For those that need this please be aware that on the edit you have to bind once to the databound event and refresh the tooltip again.

[Neli]

Hi Dan,

Indeed,  when the Tooltip is used for the TreeList command buttons the content of the Tooltip needs to be refreshed also when an item is updated. As you mentioned, this can be done in the dataBound event handler. Thank you for adding this note, as I missed it in the Dojo provided in my previous reply. In the Dojo linked here also the Tooltip is refreshed also in the dataBound event handler. 

Regards,

Neli