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 👍

[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.