Fix tooltip not being correctly positioned for certain centered graphs #118
e26chiu
Loading…
Reference in New Issue
No description provided.
Delete Branch "fix-tooltip-center"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Applied the fix used by the WordCloud to all graphs so that tooltips will be properly positioned, even if the graph is centered on the page. Did so by refactoring some tooltip logic in to a common getTooltipPosition used by all graphs.
One thing is that this simplifies all the tooltips to simply follow the mouse, instead of locking onto certain "blocks"/bars like in the grouped bar graph, which is more consitant with all the other tooltips, since we only had this in some cases.
Do we think that having the tooltip be sticky to a certain bar/group is important?
Closes #89
https://fix-tooltip-center-csc-class-profile-staging-snedadah.k8s.csclub.cloud/samplePage/
@ -33,3 +52,3 @@};export { TooltipWrapper };function getTooltipPosition(this is the main important function that all graphs now use
@ -47,2 +61,4 @@<div className={styles.page}><Header /><SectionWrapper title="Transfer" /><ComponentWrapper align="right" heading={""}>ill remove these before merging. Just here to replicate the bug and show its fixed for all graphs
Great work! @snedadah Thanks for refactoring the tooltip part! It looks really clean and you handled all the edge cases pretty well. To respond to your question, I think we should keep the tooltip close to the mouse. I think this can make the appearance of the tooltip more expected when you hover over an icon: people can expect the tooltip to appear close to their mouse rather than seeing the tooltip appear somewhere else. It's also better to standardize across graphs as you mentioned.
@ -14,0 +17,4 @@function getOutmostSVG(element: Element): SVGElement | undefined {let rootSVG: HTMLElement | Element | null = element ?? null;let current: HTMLElement | Element | null = element;Not a blocker here, more of a question: What is the difference between
HTMLElementandElement? Do we need both of them in the types?Not sure what the exact difference is, but element.parentElement returns an HTMLElement, while element is an Element, so we need both here for that reason (since that variable could be either one of those)