Tooltip prevents button click event

[Christy]

I am trying to put a tooltip on a button link as shown below.  The button is in a grid, so I have included the template.  It is just an image with font-awesome, so there is no text.  Because I am using Angular, the event that needs to be called is an ng-click event.

template:
  '<a data-toggle="tooltip" title="Deactivate" class="btn ct-image-button" ng-click="$ctrl.changeActivation(dataItem)">' +
      '<i class="fa fa-times-circle fa-lg red-color" aria-hidden="true"></i>' +
      '<span class="sr-only">Deactivate</span>' +
  '</a>'

I have tried adding the tooltip using the kendo-tooltip attribute on <a>, as well as adding during the component's $onInit method (shown below):

$ctrl.$onInit = function () {
    var grid = $('#grid');
    grid.kendoTooltip({
        filter: '[data-toggle="tooltip"][title="Deactivate"]',
        content: 'Deactivate'
    });
};

However, when I hover over the button, either the tooltip appears or the button can be clicked.  This prevents users from clicking on the button once the tooltip is shown.  

Finally, I have tried adding a <span> around my button with the tooltip on that.  This causes a mix of kendo-tooltip and standard tooltip to appear, depending on where my cursor is located.

Is there any way to use the tooltip with a button?

[Ianko]

Hello Christy,

You can wrap the entire grid with an element that implements the kendo-tooltip directive and everything should work as expected. You should not need to programmatically initialize the Kendo Tooltip on the grid's wrapper element. Check out this dojo here: http://dojo.telerik.com/aMera. 

Regards,
Ianko
Telerik by Progress

 

 

[Christy]

Okay, I have this working now by adding some CSS to move the tooltip down a bit.  I did try the approach in the dojo with the same results.  

I am still having a problem in IE, however.  It seems that the tooltip on my edit command (filter: '.k-grid-content a.k-grid-edit') does not want to disappear when the mouse is no longer over the <a> tag.  Since I have 2 <a> tags with tooltips in the same column (edit and deactivate), it means that the tooltips overlap.  

I tried going back to the original way I wrote it with the CSS making sure there was no overlap and then adding the following:

.on('mouseout', function (e) {
    var target = $('#' + e.target.id).data('kendoTooltip');
    if (target) {
        target.hide();
    }
});

However, it calls the mouseout method on every move within the grid and never seems to correctly find the target when it should.

According to your issues log, not hiding the tooltip appears to have been a problem in the past.  Has this been corrected? It seems there is more recent information on StackOverflow that indicates the same issue, although mine DOES seem to work fine in Chrome.

As an aside, I am unable to use the approach of assigning the edit tooltip to a variable and calling a hide() on this tooltip when the user has a mouseover on the deactivate button because the edit tooltip is assigned in a way that covers the entire grid.  As a result, the hide() method hides the grid on the page.  So, this is not an option.  

Are you planning to fix this issue for IE or is this something that just must go out to our clients as a defect?

Thanks!

[Ianko]

Hello Christy,

The GitHub issue linked is closed, therefore, it should be corrected. 

As you said, on your end everything is fine in Chrome and the problem is with IE. Then, I also doubt the StackOverflow thread to addresses the same situation.

As I am unable to follow your scenario and I am unable to see the code you have actually implemented, please isolate the case you have in a simple dojo and send the link so that I can properly investigate the actual scenario. 

Regards,
Ianko
Telerik by Progress