Conflicts with ui.bootstrap.tooltip

[ghost]

Firstly, thanks for the module. Works great.

I just noticed that when I use Angular Bootstrap Tooltip on the same element, the confirm doesn't work anymore. For example this works fine:

<img src="img/trash.png" ng-click="delete()" confirm="Are you sure to delete?" confirm-settings="{size: 'sm'}" />

but when I add the tooltip the dialog doesn't pop up:

<img src="img/trash.png" ng-click="delete()" uib-tooltip="Delete list" confirm="Are you sure to delete?" confirm-settings="{size: 'sm'}" />

Thanks,
Volkan

[jameskleeh]

Is the tooltip triggered on click?

[ghost]

No, just on hover.

[icfantv]

@volkanx, i'm the PM for the Angular UIBS team, can you please create a working plunker that shows this issue? I want to make sure it's not something we're doing that we shouldn't be. Thanks.

[ghost]

@icfantv Sure, I'll let you know as soon as I come up with something. Thanks for your interest.

[ghost]

I've tried it on plunker but unfortunately wasn't able to isolate the issue successfully (Here's the link of the plunk though in case I may need to revisit later: https://plnkr.co/edit/TYKmJaFvenogQV6peNu6)

I've released my project and for an online demonstration of the issue I added a page with tooltip as well.

The main page (https://domchk53.com) has a pills tabs next to "Lists" section as shown in the screenshot below:

The edit button has a tooltip and the delete button only has confirm directive. Without the tooltip confirm works fine as expected.

The test page I created is: https://domchk53.com/indexWithTooltip.html
In this one, both buttons have tooltips. The behaviour is rather odd here. On the delete button there's a bit of a flicker and tooltip is not steady. Interestingly if you click on the mouse button and hold it, the tooltip appears as if it was meant to appear on click.

If you move the mouse to the exact right spot where the tooltip can be visible then confirm works but finding that spot is a bit of a hassle because of the flicker issue.

Two versions are identical except that the 2nd version has the tooltip directive on the button

uib-tooltip="Delete list"

The source code is on GitHub if you want to have a look: https://github.com/volkanx/domchk53/tree/master/src/DomChk53.UI.Web

(The HTMLs with the tooltip are under app/partials named SubmitNames.html and SubmitNamesWithTooltip.html)

Anyway, hope this helps a bit. Sorry for not being able come up with a concise plunk to illustrate the problem. There are other components involved so if you think something else might be causing it please close this one.

[icfantv]

It's pretty late here so I'll have to look into this later, but I will tell you that angular-confirm appears to be interfering with all the tooltip triggers, not just the default mouseenter one. If I remove angular-confirm as a module dependency for the app, the UIBS tooltips work correctly.

I would start there and determine how this module is preventing normal events from propagating.

[jameskleeh]

@icfantv The only manipulation with events is the following:

element.unbind("click").bind("click", function ($event) {

[icfantv]

@Schlogen, that's really odd - further investigation is certainly warranted.

[alainib]

i get this problem in the past.
i "resolve it" like this :
<span uib-tooltip="Delete list" > <img src="img/trash.png" ng-click="delete()" confirm="Are you sure to delete?" confirm-settings="{size: 'sm'}" /> </span>

[ghost]

@alainib thanks for that. I think it works for me. there are some points that cause flickering but I guess it has something to do with image transparency. anyway, I'll update my project with your suggestion. thanks.