Tooltip is floating

[tjwds]

I have no idea where this CSS is coming from, but it seems to be causing the problem:

.popover.top {
margin-top: -10px;
}

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[crookedneighbor]

Related to #4307

And I don't think that CSS is the problem. I use the Chrome developer tools to disable it, and it was still floating:

[tjwds]

You're right; with that disabled, it looks like the calculated "top" rule is 33 px off.

[kangabell]

I'm trying to hunt down how the margin is being calculated. It is proving to be somewhat difficult. If anyone has any clues let me know!

[crookedneighbor]

I believe it's being calculated by the bootstrap plugin that generates the popover.

[kangabell]

That's what I figured. However, when I tried commenting-out all of the content of popover.js, tooltip.js, jquery.ui.tooltip.js, jquery.ui.tooltip.min.js, along with a ton of other code I thought might potentially be causing the popover, the popovers still mysteriously persist. I don't get it...

[TheHollidayInn]

Hello,

Do you mind telling me how to recreate the issue? I would like to help debug, but I'm not sure how to get a popover that persists.

[kangabell]

@keithEz Good question. To replicate, find or create an item (habit, reward, etc.) with "Extra Notes" filled out – something with 200 or so characters – then hover over the item. The tooltip that contains the "Extra Notes" data will float way high up above the item. The excess margin seems to grow with however many lines of text you have. So if the notes are shorter (i.e. only a few words) the placement looks correct, but once you get into longer descriptions it's very out of place.

[kangabell]

here is an example

(note: cursor is over "Earthquake", and the tooltip info is associated with that item, not the one it's directly over)
*sorry this image is huge – dunno what's up with that!

[TheHollidayInn]

Okay, so I believe I have made some progress.

First of all, when you edit a daily, add notes and then hit save, the tooltip remains a float.

Also, it seems that the tooltip is misplaced for every item in the Rewards section.

Does that sound correct?

[kangabell]

The tooltip remaining after saving a daily sounds like a separate issue. I believe this issue is specifically for the placement of the tooltip.

As for the Rewards section, the placement depends on the content of the items. Everyone has different content there. But I believe the issue is only for tooltips whose content amounts to more than one line of text. If there is just one line of text it seems fine.

[TheHollidayInn]

Sounds good. I believe this may have been resolved on the tooltip.js file. Here is a commit: angular-ui/bootstrap@5726e3e .

I believe this should resolve the issue on a new build. I'm going to rerun on my local server. Is anyone still experiencing this issue?

[khipkin]

@Alys is this still an issue?

[Alys]

I'm not sure, but it's low priority and it will be made redundant by the upcoming website improvement project so I'm closing it.