diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx
index fdd0963fd31..b551435e979 100644
--- a/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx
+++ b/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx
@@ -38,25 +38,17 @@ type Coord = [number, number] | undefined
export const TooltipWhereMouseovered = observer(function ({
model,
mouserect,
- mouserectClient,
xdistance,
- ydistance,
}: {
model: DotplotViewModel
mouserect: Coord
- mouserectClient: Coord
xdistance: number
- ydistance: number
}) {
const { classes } = useStyles()
const { hview, vview, viewHeight } = model
const theme = useTheme()
- const x = (mouserectClient?.[0] || 0) - (xdistance < 0 ? 0 : 0)
- const y = (mouserectClient?.[1] || 0) - (ydistance < 0 ? 0 : 0)
const { refs, floatingStyles, context } = useFloating({
- open: true,
- onOpenChange: () => {},
placement: xdistance < 0 ? 'left' : 'right',
})
@@ -72,7 +64,6 @@ export const TooltipWhereMouseovered = observer(function ({
ref={refs.setFloating}
style={{
...floatingStyles,
- transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
zIndex: 100000,
pointerEvents: 'none',
}}
@@ -107,12 +98,10 @@ export const TooltipWhereClicked = observer(function ({
const y = (mousedownClient?.[1] || 0) - (ydistance < 0 ? 0 : 0)
const { refs, floatingStyles, context } = useFloating({
- open: true,
- onOpenChange: () => {},
- placement: xdistance < 0 ? 'left' : 'right',
+ placement: xdistance < 0 ? 'right' : 'left',
})
- const clientPoint = useClientPoint(context)
+ const clientPoint = useClientPoint(context, { x, y })
const { getFloatingProps } = useInteractions([clientPoint])
const popperTheme = theme?.components?.MuiPopper
@@ -123,7 +112,6 @@ export const TooltipWhereClicked = observer(function ({
ref={refs.setFloating}
style={{
...floatingStyles,
- transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
zIndex: 100000,
pointerEvents: 'none',
}}
diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx
index bff396c5abd..86b46c331e2 100644
--- a/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx
+++ b/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx
@@ -245,9 +245,7 @@ const DotplotViewInternal = observer(function ({
) : null}
{validSelect ? (
diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx
index 5cfd4f2862d..7156f688f0a 100644
--- a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx
+++ b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx
@@ -194,7 +194,7 @@ const LinearSyntenyRendering = observer(function ({
height={height}
/>
{model.mouseoverId && tooltip && currX && currY ? (
-
+
) : null}
)
diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx
index c3874ae2016..9bbf33ea03f 100644
--- a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx
+++ b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx
@@ -31,21 +31,12 @@ const useStyles = makeStyles()(theme => ({
},
}))
-const SyntenyTooltip = observer(function ({
- x,
- y,
- title,
-}: {
- x: number
- y: number
- title: string
-}) {
+const SyntenyTooltip = observer(function ({ title }: { title: string }) {
const theme = useTheme()
const { classes } = useStyles()
const { refs, floatingStyles, context } = useFloating({
- open: true,
- onOpenChange: () => {},
+ placement: 'right',
})
const clientPoint = useClientPoint(context)
@@ -60,7 +51,6 @@ const SyntenyTooltip = observer(function ({
ref={refs.setFloating}
style={{
...floatingStyles,
- transform: `translate(${Math.round(x + 15)}px,${Math.round(y)}px)`,
zIndex: 100000,
pointerEvents: 'none',
}}
diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx
index 68e4ad55477..2a07cb0c7ee 100644
--- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx
+++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx
@@ -65,11 +65,10 @@ const Tooltip = observer(function ({
const y = clientMouseCoord[1]
const { refs, floatingStyles, context } = useFloating({
- open: true,
- onOpenChange: () => {},
+ placement: 'right',
})
- const clientPoint = useClientPoint(context)
+ const clientPoint = useClientPoint(context, { x, y })
const { getFloatingProps } = useInteractions([clientPoint])
const contents = featureUnderMouse
@@ -84,7 +83,6 @@ const Tooltip = observer(function ({
ref={refs.setFloating}
style={{
...floatingStyles,
- transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
zIndex: 100000,
pointerEvents: 'none',
}}
diff --git a/plugins/wiggle/src/Tooltip.tsx b/plugins/wiggle/src/Tooltip.tsx
index 2c51db0b25b..e563cd7c564 100644
--- a/plugins/wiggle/src/Tooltip.tsx
+++ b/plugins/wiggle/src/Tooltip.tsx
@@ -72,14 +72,16 @@ const Tooltip = observer(function Tooltip({
const { refs, floatingStyles, context } = useFloating({
open: true,
onOpenChange: () => {},
+ placement: 'right',
})
- const clientPoint = useClientPoint(context)
+ const x = clientMouseCoord[0] + 5
+ const y = useClientY ? clientMouseCoord[1] : clientRect?.top || 0
+ const clientPoint = useClientPoint(context, { x, y })
const { getFloatingProps } = useInteractions([clientPoint])
const popperTheme = theme?.components?.MuiPopper
- const x = clientMouseCoord[0] + 5
- const y = useClientY ? clientMouseCoord[1] : clientRect?.top || 0
+
return featureUnderMouse ? (
<>
@@ -88,7 +90,6 @@ const Tooltip = observer(function Tooltip({
ref={refs.setFloating}
style={{
...floatingStyles,
- transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
zIndex: 100000,
pointerEvents: 'none',
}}