Note: This is a beta release of Red Hat Bugzilla 5.0. The data contained within is a snapshot of the live data so any changes you make will not be reflected in the production Bugzilla. Also email is disabled so feel free to test any aspect of the site that you want. File any problems you find or give feedback here.
Bug 1365929 - tooltips in dashboard Utilization boxes move on page scroll
Summary: tooltips in dashboard Utilization boxes move on page scroll
Keywords:
Status: CLOSED CURRENTRELEASE
Alias: None
Product: ovirt-engine-dashboard
Classification: oVirt
Component: Core
Version: unspecified
Hardware: All
OS: All
medium
medium
Target Milestone: ovirt-4.1.1
: 1.1.0
Assignee: Scott Dickerson
QA Contact: Pavel Novotny
URL:
Whiteboard:
: 1367900 1380845 (view as bug list)
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2016-08-10 14:16 UTC by Lucie Leistnerova
Modified: 2017-04-21 09:48 UTC (History)
8 users (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Environment:
Last Closed: 2017-04-21 09:48:46 UTC
oVirt Team: UX
rule-engine: ovirt-4.1+
mgoldboi: planning_ack+
oourfali: devel_ack+
lsvaty: testing_ack+


Attachments (Terms of Use)
mouse over title moved up (deleted)
2016-08-10 14:16 UTC, Lucie Leistnerova
no flags Details
looks ok (browser resize) 2016-10-07 (deleted)
2016-10-07 17:44 UTC, Scott Dickerson
no flags Details
looks ok (event tab up) 2016-10-07 (deleted)
2016-10-07 17:45 UTC, Scott Dickerson
no flags Details
tooltip test Firefox 49.0 (deleted)
2016-10-12 16:32 UTC, Lucie Leistnerova
no flags Details


Links
System ID Priority Status Summary Last Updated
oVirt gerrit 72137 master MERGED Fix tooltip positioning on SVG elements when the page is scrolled 2017-02-14 17:07:40 UTC
oVirt gerrit 72299 ovirt-engine-dashboard-1.1 MERGED Fix tooltip positioning on SVG elements when the page is scrolled 2017-02-14 17:23:45 UTC

Description Lucie Leistnerova 2016-08-10 14:16:39 UTC
Created attachment 1189652 [details]
mouse over title moved up

Description of problem:
mouse over titles in Utilization box are moved up, when page is scrolled down


Version-Release number of selected component (if applicable): ovirt-engine-dashboard-1.0.2-1.el7ev.x86_64


How reproducible: always


Steps to Reproduce:
1. go to Dashboard
2. resize event panel so that scrollbar appears
2. scroll down in Dashboard
3. move mouse to color square under CPU, Memory or Storage in Utilization box
4. mouse over title is moved up

Tested in Firefox 47.0
Google Chrome 52.0


Actual results: mouse over title is moved up


Expected results: mouse over title should be above color square, as it is if Dashboard page is not scrolled

Comment 1 Greg Sheremeta 2016-08-11 10:48:05 UTC
Tooltips should be pinned on the elements they're helping -- they should certainly never move.

Comment 2 Vojtech Szocs 2016-08-24 14:35:13 UTC
*** Bug 1367900 has been marked as a duplicate of this bug. ***

Comment 3 Scott Dickerson 2016-10-05 16:53:29 UTC
*** Bug 1380845 has been marked as a duplicate of this bug. ***

Comment 4 Scott Dickerson 2016-10-07 17:41:20 UTC
I can't reproduce the behavior in either Firefox 49.0 or Chrome 53.0 testing against a local dashboard build against tag 1.0.2-1, branch ovirt-engine-dashboard-1.0, and master.

I tried 2 ways to reproduce:

First -
1. login to admin, 
2. let dashboard render, 
3. adjust the size of the browser windows to get scroll bars, 
4. scroll down to the heat map, 
5. mouse hover over a square,
6. tooltip displaying the cluster name or storage domain name renders properly

Second -
1. login to admin, 
2. let dashboard render, 
3. open the dark gray events view below the dashboard and adjust its height until the dashboard frame gets scroll bars, 
4. scroll down to the heat map, 
5. mouse hover over a square,
6. tooltip displaying the cluster name or storage domain name renders properly

I'll attached screen shots of each window with the tooltip rendered properly.

Any chance this can be retested with the old and current browser versions?

Comment 5 Scott Dickerson 2016-10-07 17:44:58 UTC
Created attachment 1208203 [details]
looks ok (browser resize) 2016-10-07

Comment 6 Scott Dickerson 2016-10-07 17:45:33 UTC
Created attachment 1208204 [details]
looks ok (event tab up) 2016-10-07

Comment 7 Lucie Leistnerova 2016-10-12 16:31:16 UTC
tooltip still moves

in Firefox 48.0 and also 49.0
on Fedora 24
dashboard version ovirt-engine-dashboard-1.0.4-1.el7ev.x86_64

Comment 8 Lucie Leistnerova 2016-10-12 16:32:55 UTC
Created attachment 1209677 [details]
tooltip test Firefox 49.0

Comment 9 Scott Dickerson 2017-02-08 16:19:04 UTC
Note: The fix for bootstrap issue [1] via pull request [2] is what causes this tooltip issue on the heat map, but only when the page is scrolled.

[1] - https://github.com/twbs/bootstrap/issues/20280
[2] - https://github.com/twbs/bootstrap/pull/20313

Comment 10 Scott Dickerson 2017-02-12 20:23:20 UTC
See [1] for almost exactly same issue raised against bootstrap 3.3.7.  The official bootstrap maintainer response is [2].  Modifying the tooltip position code [3], based on angular-bootstrap's implementation (the version angular-patternfly uses) [4] that does not use jQuery, should fix this issue.

[1] - https://github.com/twbs/bootstrap/issues/20381
[2] - https://github.com/twbs/bootstrap/issues/20381#issuecomment-244818116
[3] - https://github.com/twbs/bootstrap/blob/v3.3.7/js/tooltip.js#L370
[4] - https://github.com/angular-ui/bootstrap/blob/0.14.3/src/position/position.js#L69

Comment 11 Scott Dickerson 2017-02-13 18:30:10 UTC
NOTE: According to bootstrap maintainers [4], support for bootstrap 3.x has been shutdown.  From the issue, "Any new changes to v3 will be sporadic and highly irregular."

While the ideal solution would be to get the change into upstream bootstrap 3, that does not currently appear to be an option.  Since maintainers aren't merging contributed fixes to bootstrap 3.x, and bootstrap 4 is still in alpha release, the fix for the tooltip placement problem is to directly override the broken function with a dashboard local version.

Comment 12 Scott Dickerson 2017-02-13 18:30:58 UTC
[4] - https://github.com/twbs/bootstrap/issues/20631

Comment 13 Pavel Novotny 2017-02-24 16:40:03 UTC
Verified in 
rhevm-4.1.1.2-0.1.el7.noarch
ovirt-engine-dashboard-1.1.0-5.el7ev.x86_64

Browsers:
Firefox 45.7 ESR
Firefox 51.0
Firefox 52b3 ESR
Chromium 55.0

Verified according to reproducer in comment 0.
When the Dashboard area is scrolled down, tooltips are still pinned to the corresponding CPU / memory / storage heat map blocks.


Note You need to log in before you can comment on or make changes to this bug.