This is a migrated thread and some comments may be shown as answers.

Tooltip prevents button click event

3 Answers 123 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 24 Oct 2016, 08:22 PM

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?

3 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 25 Oct 2016, 10:20 AM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Christy
Top achievements
Rank 1
answered on 31 Oct 2016, 03:41 PM

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!

0
Ianko
Telerik team
answered on 01 Nov 2016, 05:39 AM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Tags
ToolTip
Asked by
Christy
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Christy
Top achievements
Rank 1
Share this question
or