[AIRFLOW-4357] Fix SVG tooltip positioning with custom scripting #8269
Conversation
| $('body').on('mouseover', '.has-svg-tooltip', function(e) { | ||
| var elem = e.target; | ||
| var text = elem.getAttribute('title'); | ||
| var circ = document.getElementById(elem.id).getBoundingClientRect(); |
There was a problem hiding this comment.
Isn't document.getElementById(elem.id) just elem?
| var centeringOffset = tip.width() / 2; | ||
| tip.css({ | ||
| "display": "block", | ||
| "left": offsetLeft + 12.5 - centeringOffset + 'px',// 12.5 == half of circle width |
There was a problem hiding this comment.
Rather than hard-coding these offsets, would it be cleaner/less future error prone to instead pass in the result of getBoundingClientRect, i.e. this function beceomes:
function showSvgTooltip(text, elemClientRect) { or
function showSvgTooltip(text, elemTop, elemLeft, elemBottom, elemRight ) { (TLBR, instead of TLXY as IEs' don't have X and Y attributes according to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
There was a problem hiding this comment.
I simplified the function argument similar to your first suggestion.
Your IE comment caused some confusion for me—I was thinking that I had used the unsupported getboundingclientrect properties, though that wasn't the fact. I did end up confirming that this works in IE Edge. I also tested in an IE11 instance, but the UI failed to operate properly. Those are either much larger compatibility issues or due to unresponsiveness of the VirtualBox instance I was testing in.
(cherry-picked from eb7255f)
Resolves AIRFLOW-4357.
Tooltip positioning was not being calculated correctly after scrolling due to a known issue in jQuery (that won't be fixed).
My solution implements a custom tooltip script for proper positioning on SVG elements. I've replicated the markup and CSS classes of the existing Tooltips, so these visually look identical to the others and require no new CSS.
I've tested/confirmed the fix in modern Chrome, Safari, Firefox, and Edge browsers.
Make sure to mark the boxes below before creating PR: [x]
In case of fundamental code change, Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in UPDATING.md.
Read the Pull Request Guidelines for more information.