Tooltip bug (version 0.13.3)

[AndreasHo]

Hello Guys,

i have a problem with showing the tooltip, wenn it get to much letters it crash.

Example:
"Data..." => the tooltip is good
"Advanced settings..." => the tooltip crash :(

it is over the Button or link and it shimmer.

I hope one of you can fix the problem :)

bye Andreas

[wesleycho]

https://github.com/angular-ui/bootstrap/blob/master/CONTRIBUTING.md#you-think-youve-found-a-bug

Please provide a reproduction via Plunker, which would allow us to debug and fix this much quicker.

[AndreasHo]

Ok i do it later, or tomorrow :)

[AndreasHo]

http://plnkr.co/edit/QKnq5z?p=preview

this is the Plunker, i think the problem only is on
tooltip-placement="left"

[skarllot]

I'm having trouble when Bootstrap version is 3.3.5. The tooltips are shown on wrong position.
If I use Bootstrap 3.3.5 and Angular-UI/Bootstrap 0.13.0 the tooltips are shown correctly.

http://embed.plnkr.co/SeGe0hanzddW3M9KcPAp/preview

[crisbeto]

I also found this to be the case. The position was slightly off in 0.12.x, it got fixed in 0.13.0 and now in 0.13.3 its slightly off again.

[dabos-GFI]

Hello,

I've analysed the problem:

• At first the tooltip is created empty and positioned,
• then the content is changed and repositioned.

When the content is changed, the tooltip box size is adapted to the content from the current position (few width because the content is push on the right side) - it can take multiples line because the word-wrap is normal.
When a new position is set, the box size can change because there is available space for the content and the new location becomes wrong.
In order to fix this problem, I've added a reset of the position (top: 0, left: 0) just before computing the offset. I will submit a fix very soon.

Best regards,

Damien

[skarllot]

Still buggy. The tooltip appears on wrong position by a fraction of a second and then is shown correctly.

Move the mouse pointer between "R", "U" and "D" back and forth to see the bug.
http://embed.plnkr.co/4kCOfLf5cpTZWYvIq4Oe/preview

[wesleycho]

There is an update in master that fixes that: http://plnkr.co/edit/YeIpLrqEy6Jlv2kNLnb6?p=info

[crisbeto]

This still happens if you don't have transitions on the tooltip. @skarllot you can try something like this, if you're not using Bootstrap's CSS:

.tooltip{
    opacity: 0;
    transition: opacity 300ms ease;
}

.tooltip.in{
    opacity: 1;
}

[dabos-GFI]

The problem is linked to the fact that the tooltip is first created empty.
When reseting the position, we can change the visibility to none too.
This way the tooltip will not move from the origin left/up corner of the container to the final position, as it will not appear at first place.
We can also compute the position if the tooltip content is not empty.

Here is the modified part of src/tooltip/tooltip.js

            var positionTooltip = function() {
              if (!tooltip || !tooltip.html()) { return; }

              if (!positionTimeout) {
                positionTimeout = $timeout(function() {
                  // Reset the positioning and box size for correct width and height values.
                  tooltip.css({ top: 0, left: 0, width: 'auto', height: 'auto', visibility: 'none' });

Here is plunker version with the update: http://embed.plnkr.co/jdZaK4ITf0uRNK7LpasG/

[wesleycho]

Mind filing a quick PR with the fix?

[dabos-GFI]

Yep I can do that ^^, just I would like to have a feedback from crisbeto to know if it is correct for him.

[crisbeto]

I don't think it works @dabos-GFI, a couple of things I noticed:

1. none isn't a possible value for visibility, the possible values are visible, hidden or collapse.
2. I tried replacing the none with hidden, but the tooltip ends up showing up for half a second and disappearing. If I use visible instead, it still has the issue where it shows up in the wrong place.

[dabos-GFI]

Did you tried the Plunker: http://plnkr.co/edit/jdZaK4ITf0uRNK7LpasG?p=preview ?
I've removed the first tooltip appearence when it is empty and fixed the visibility value.
Thanks :)

[crisbeto]

I tested it out the project that I'm currently working on and the tooltip showed up at the bottom right(as opposed to the top left before). Its kinda hard to isolate in a plunk since its a big project, however the tooltip is on an element that's position: absolute. I've attached a gif of what happens, it doesn't happen every time so it might be some kind of race condition.

Otherwise the Plunker that you posted looks like its working, even if the tooltip doesn't have a transition.

[dabos-GFI]

Have you tried your project, with my version of the code : http://embed.plnkr.co/jdZaK4ITf0uRNK7LpasG/ui-bootstrap.js ?

[crisbeto]

Well I had applied your changes manually. I couldn't get it to break with the one you just linked 👍

[dabos-GFI]

Another check with the original plunker for this bug: http://plnkr.co/edit/gX3niy?p=preview

[skarllot]

Seems alright for me.

[AndreasHo]

Hello Guys :)

i updated today my ui-bootstrap and get now the same problem..

uib-tooltip crash when it is to long :/

[RobJacobs]

@AndreasHo I updated the original plunk you created to use the supported libraries:

Angular 1.3.4 to 1.4.7
Bootstrap CSS 3.1.1 to 3.3.5

and the most recent (0.14.2) angular-ui-bootstrap release here. I'm not seeing a 'crash'?

[AndreasHo]

Hello, ok i have used the ui-bootstrap 0.14.1...

http://plnkr.co/edit/5wfB26?p=preview
this plunker have the problem...

• position: absolute/fixed
• right: 0

[RobJacobs]

When using a tooltip in an absolute positioned element, you need tooltip-append-to-body="true"

[AndreasHo]

wow, thanks!

[ghost]

@RobJacobs Works like a charm, thanks! Maybe the doc should be updated to explain the trick.

[dominik-mrugalski]

@RobJacobs Thanks for your tip! You solved my huge problem with bouncing tooltip position! Old tip but still working! Have a nice day!