Invisible tooltip blocks original element from being hovered

[slavafomin]

Hello!

Thank you for this great module!

I'm having a very weird issue with it. I'm using the following code:

<a
    href="#"
    tooltips
    tooltip-content="
        Бизнес инкубатор — это автоматическая система построения бизнес-команды в Академии Победителей,
        включающая в себя систему поиска и приглашения новых людей в Вашу команду.
        Бизнес инкубатор помогает автоматизировать Ваш бизнес и представляет собой совокупность вспомогательных
        систем, позволяющую в кротчайшие сроки обучать новичков основам бизнеса, доводить участников
        системы до стабильного финансового результата, а так же помогает полностью автоматизировать Ваш
        бизнес в Академии Победителей.
    "
>
    <span class="fa fa-question-circle"></span>
</a>

._720kb-tooltip {
  width: 400px;
}

The issue is that invisible tooltip is somewhat still physical and it blocks underlying original element from being hovered. The end result is that tooltip is not displayed. When I reduce the text length I can get it to display because the size of container changes.

Here's the screenshots:

On the screenshot above, the question-mark icon can not be hovered, because it's hidden underneath the tooltip container.

Please advise! Thank you!

[wouldgo]

Hi @slavafomin,

this is the umpteenth positioning problem of this implementation we encountered so far... We're discussing to refactor the way the directive manage the tooltip element.

If you have any ideas don't hesitate to write them down!

[slavafomin]

Hello @wouldgo! I'm not familiar with the implementation of the angular-tooltips, but my solution from the top of the head would be to create an absolutely positioned block element that will hold the tooltip content for each individual directive and apply display: none; to it via CSS class, e.g. hidden. Then when you need to display the tooltip you will need to calculate the absolute position for it, apply top and bottom styles and remove the hidden class. I'm not sure why do you use the visibility style. Also, the best course of action is to minimize number of styles applied to the DOM inside the JavaScript code, we should use CSS classes for it in order to separate the concerns and to provide better extensibility. If you have a practical understanding of why this will not work, I'm happy to discuss it further and narrow down the best possible solution.

Cheers!

[slavafomin]

Also, I have had to switch to Tooltipster jQuery plugin in my application (app is in production and I can't afford bugs like this) for now. It works flawlessly, maybe we could use their implementation ideas as a base for angular-tooltips.

[djaax]

+1 I tried to fix this with an additional timeout on hideTooltip()

setTimeout(function() {
     theTooltip.css('display', 'none');
}, speed);

and display: block on initTooltip() and showTooltip(). It works but it has the unpleasant side effect of removing the Tooltip's position.

Any ideas why?

[45kb]

Hi all, just to clarify to all :)

visiblity: rule was introduced (replacing display:) to be able to use css transitions (https://github.com/720kb/angular-tooltips#tooltip-speed)

So the hidden tooltip should be visibility:hidden; positioned out of window (https://github.com/720kb/angular-tooltips/blob/master/src/css/angular-tooltips.css#L11), but looks like this is not working in this case.

As @wouldgo said, we are thinking about a huge refactor of this module, so any idea is welcome.

Thank you :+1:

[kadamwhite]

@45kb The offscreen positioning looks like it doesn't work because that -200% style rule is being overridden by an inline style the directive sets:

[kadamwhite]

One potential solution could be to have a ._720kb-tooltip-hidden class that !importants the left rule, which the directive could remove on showTooltip

Edit: PR'd an approach using :not(._720kb-tooltip-open), instead of adding a new class

[celsomtrindade]

@kadamwhite Thanks. This is working for me.

[mangXteros]

I have the same issue. but when i check demo in http://720kb.github.io/angular-tooltips/ the tooltip block does disappear.

when comparing my code(latest version from github) and the demo, i found:

min.css is not the same:

._720kb-tooltip in demo site has "visibility:hidden"; src from github doesn't when create the tooltip, src from github add "visibility:visible" on every tooltip ; demo site doesn't

SO i remove "theTooltip.css('visibility', 'visible');" in angular-tooltips.js and use angular-tooltips.min.css from http://720kb.github.io/angular-tooltips/. And it works, as least to me

[45kb]

Yes, be sure to NOT use the demo source files, they are not uptodate Please let know if that was the fix, and we close the issue

[fabiowitt]

I'm having the same issue. Any updates on this? This is going to be solved just on the refactor?

[Schlumpf9]

I'm having the same issue too. The tooltip is blocking my buttons/links next to the element which shows the tooltip. They are not clickable anymore, when the tooltip was showing once. When i reload my page it is working, but after showing the tooltip my links are broken. Hope you can fix it guys!

For the animation issue using display none/block consider this solution (not tested yet, but sound's plausible): http://stackoverflow.com/questions/8449933/animation-css3-display-opacity

@-webkit-keyframes fadeInFromNone {
   0% {
        display:none; 
        opacity: 0;
   }
   1% {
        display: block ; 
        opacity: 0;
   }
    100% {
        display: block ; 
        opacity: 1;
    }
}

[ruhley]

For me it was as simple as adding pointer-events: none; to the _720kb-tooltip class. Older versions of IE do not support this css property, though that is not a problem for me.

[45kb]

We performed a refactor that completely changes the behavior (new module version).

We also revised all the attributes/options (see Readme.md), could be great if you can try the new version and give us feedback in case.

This is the only reason why i am going to close this PR.

Thank you and feel free to ask if any doubt or question about the new version.