Component | Tooltip | Fix: prevent container overflow when viewport s…

…ize is reduced #286
f5 · Oct 19, 2023 · 6938b80 · 6938b80
1 parent e207bde
commit 6938b80
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 1 deletion.
diff --git a/packages/dev/src/examples/auxiliary/tooltip/tooltip-resize-behavior/index.tsx b/packages/dev/src/examples/auxiliary/tooltip/tooltip-resize-behavior/index.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { Position, Scatter } from '@unovis/ts'
+import { VisXYContainer, VisAxis, VisScatter, VisTooltip } from '@unovis/react'
+
+import { XYDataRecord } from '@src/utils/data'
+
+import s from './styles.module.css'
+
+export const title = 'Scrollable Container Comparison'
+export const subTitle = 'For testing resize behavior'
+
+export const component = (): JSX.Element => {
+  const data = [
+    { x: 0, y: 5 },
+    { x: 3, y: 10 },
+    { x: 6, y: 0 },
+    { x: 9, y: 5 },
+  ]
+
+  return (<>
+    <VisXYContainer<XYDataRecord> data={data}>
+      <VisScatter x={(d: XYDataRecord) => d.x} y={(d: XYDataRecord) => d.y}/>
+      <VisTooltip horizontalPlacement={Position.Center} triggers={{
+        [Scatter.selectors.point]: () => `<div class="${s.tooltip}">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </div>`,
+      }} />
+      <VisAxis type='x' />
+      <VisAxis type='y' />
+    </VisXYContainer>
+    <div className={s.scrollContainer}>
+      <VisXYContainer<XYDataRecord> data={data} width={800}>
+        <VisScatter x={(d: XYDataRecord) => d.x} y={(d: XYDataRecord) => d.y}/>
+        <VisTooltip horizontalPlacement={Position.Center} triggers={{
+          [Scatter.selectors.point]: (d) => `<div class="${s.tooltip}">${d.x}, ${d.y}</div>`,
+        }} />
+        <VisAxis type='x' />
+        <VisAxis type='y' />
+      </VisXYContainer>
+    </div>
+  </>
+  )
+}
diff --git a/packages/dev/src/examples/auxiliary/tooltip/tooltip-resize-behavior/styles.module.css b/packages/dev/src/examples/auxiliary/tooltip/tooltip-resize-behavior/styles.module.css
@@ -0,0 +1,16 @@
+.scrollContainer {
+  width: 50%;
+  height: 100px;
+  overflow: scroll;
+  border: 1px solid #444;
+  margin: 0 auto;
+}
+.tooltip {
+  max-width: 600px;
+  word-wrap: break-word;
+}
+
+.tooltipDivContainer {
+  width: 100%;
+  height: 300px;
+}
diff --git a/packages/ts/src/components/tooltip/index.ts b/packages/ts/src/components/tooltip/index.ts
@@ -83,13 +83,22 @@ export class Tooltip {
       this.div.html(html)
     }
 
-    this.div.classed(s.show, true)
+    this.div
+      .classed(s.hidden, false)
+      .classed(s.show, true)
+
     this._isShown = true
     this.place(pos)
   }
 
   public hide (): void {
     this.div.classed(s.show, false)
+      .on('transitionend', () => {
+        // We hide the element once the transition completes
+        // This ensures container overflow will not occur when the window is resized
+        this.div.classed(s.hidden, !this._isShown)
+      })
+
     this._isShown = false
   }
 

diff --git a/packages/ts/src/components/tooltip/style.js b/packages/ts/src/components/tooltip/style.js
@@ -67,3 +67,7 @@ export const positionFixed = css`
 export const show = css`
   opacity: 1;
 `
+
+export const hidden = css`
+  display: none;
+`