Bug 1365929
| Summary: | tooltips in dashboard Utilization boxes move on page scroll | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | [oVirt] ovirt-engine-dashboard | Reporter: | Lucie Leistnerova <lleistne> | ||||||||||
| Component: | Core | Assignee: | Scott Dickerson <sdickers> | ||||||||||
| Status: | CLOSED CURRENTRELEASE | QA Contact: | Pavel Novotny <pnovotny> | ||||||||||
| Severity: | medium | Docs Contact: | |||||||||||
| Priority: | medium | ||||||||||||
| Version: | unspecified | CC: | bugs, gshereme, lleistne, lsvaty, mgoldboi, mst, oourfali, pstehlik | ||||||||||
| Target Milestone: | ovirt-4.1.1 | Flags: | rule-engine:
ovirt-4.1+
mgoldboi: planning_ack+ oourfali: devel_ack+ lsvaty: testing_ack+ |
||||||||||
| Target Release: | 1.1.0 | ||||||||||||
| Hardware: | All | ||||||||||||
| OS: | All | ||||||||||||
| Whiteboard: | |||||||||||||
| Fixed In Version: | Doc Type: | If docs needed, set a value | |||||||||||
| Doc Text: | Story Points: | --- | |||||||||||
| Clone Of: | Environment: | ||||||||||||
| Last Closed: | 2017-04-21 09:48:46 UTC | Type: | Bug | ||||||||||
| Regression: | --- | Mount Type: | --- | ||||||||||
| Documentation: | --- | CRM: | |||||||||||
| Verified Versions: | Category: | --- | |||||||||||
| oVirt Team: | UX | RHEL 7.3 requirements from Atomic Host: | |||||||||||
| Cloudforms Team: | --- | Target Upstream Version: | |||||||||||
| Embargoed: | |||||||||||||
| Attachments: |
|
||||||||||||
Tooltips should be pinned on the elements they're helping -- they should certainly never move. *** Bug 1367900 has been marked as a duplicate of this bug. *** *** Bug 1380845 has been marked as a duplicate of this bug. *** 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? Created attachment 1208203 [details]
looks ok (browser resize) 2016-10-07
Created attachment 1208204 [details]
looks ok (event tab up) 2016-10-07
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 Created attachment 1209677 [details]
tooltip test Firefox 49.0
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 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 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. 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. |
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