From 0b1b95f377c2fdfdb2d3d54d8d9a7a276d59f58f Mon Sep 17 00:00:00 2001 From: Guillaume Duboc Date: Sat, 2 Mar 2024 12:11:53 +0100 Subject: [PATCH] fix: ensure tooltip is in view --- src/flamegraph/tooltip.tsx | 4 ++-- src/network/tooltip.tsx | 4 ++-- src/style/_base.scss | 4 +--- src/treemap/tooltip.tsx | 4 ++-- test/__snapshots__/e2e.test.ts.snap | 32 +++++++++++----------------- test/__snapshots__/gh59.test.ts.snap | 32 +++++++++++----------------- test/__snapshots__/gh69.test.ts.snap | 32 +++++++++++----------------- test/__snapshots__/gh93.test.ts.snap | 32 +++++++++++----------------- 8 files changed, 55 insertions(+), 89 deletions(-) diff --git a/src/flamegraph/tooltip.tsx b/src/flamegraph/tooltip.tsx index 953e62c..2014b79 100644 --- a/src/flamegraph/tooltip.tsx +++ b/src/flamegraph/tooltip.tsx @@ -130,12 +130,12 @@ export const Tooltip: FunctionalComponent = ({ if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); diff --git a/src/network/tooltip.tsx b/src/network/tooltip.tsx index 36c1031..0abd7a0 100644 --- a/src/network/tooltip.tsx +++ b/src/network/tooltip.tsx @@ -50,12 +50,12 @@ export const Tooltip: FunctionalComponent = ({ node, visible }) => if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); diff --git a/src/style/_base.scss b/src/style/_base.scss index 978e894..71a43cd 100644 --- a/src/style/_base.scss +++ b/src/style/_base.scss @@ -60,8 +60,6 @@ main { padding: 5px; - white-space: nowrap; - font-size: 0.875rem; background-color: var(--background-color); @@ -139,4 +137,4 @@ main { .node { cursor: pointer; -} \ No newline at end of file +} diff --git a/src/treemap/tooltip.tsx b/src/treemap/tooltip.tsx index 953e62c..2014b79 100644 --- a/src/treemap/tooltip.tsx +++ b/src/treemap/tooltip.tsx @@ -130,12 +130,12 @@ export const Tooltip: FunctionalComponent = ({ if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); diff --git a/test/__snapshots__/e2e.test.ts.snap b/test/__snapshots__/e2e.test.ts.snap index 0ebcf07..50617f0 100644 --- a/test/__snapshots__/e2e.test.ts.snap +++ b/test/__snapshots__/e2e.test.ts.snap @@ -69,7 +69,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -2962,11 +2961,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -4666,7 +4665,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -9582,11 +9580,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -10111,7 +10109,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -15008,7 +15005,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -18291,11 +18287,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -19854,7 +19850,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -22747,11 +22742,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -24457,7 +24452,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -29373,11 +29367,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -29902,7 +29896,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -34799,7 +34792,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -38082,11 +38074,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; diff --git a/test/__snapshots__/gh59.test.ts.snap b/test/__snapshots__/gh59.test.ts.snap index 7fa78ec..5cc13ab 100644 --- a/test/__snapshots__/gh59.test.ts.snap +++ b/test/__snapshots__/gh59.test.ts.snap @@ -69,7 +69,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -2962,11 +2961,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -4669,7 +4668,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -9585,11 +9583,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -10121,7 +10119,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -15018,7 +15015,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -18301,11 +18297,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -19864,7 +19860,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -22757,11 +22752,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -24472,7 +24467,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -29388,11 +29382,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -29928,7 +29922,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -34825,7 +34818,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -38108,11 +38100,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; diff --git a/test/__snapshots__/gh69.test.ts.snap b/test/__snapshots__/gh69.test.ts.snap index e155c42..dfd2e96 100644 --- a/test/__snapshots__/gh69.test.ts.snap +++ b/test/__snapshots__/gh69.test.ts.snap @@ -69,7 +69,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -2962,11 +2961,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -4665,7 +4664,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -9581,11 +9579,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -10095,7 +10093,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -14992,7 +14989,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -18275,11 +18271,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -19838,7 +19834,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -22731,11 +22726,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -24440,7 +24435,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -29356,11 +29350,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -29870,7 +29864,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -34767,7 +34760,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -38050,11 +38042,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; diff --git a/test/__snapshots__/gh93.test.ts.snap b/test/__snapshots__/gh93.test.ts.snap index 13e6034..05af5df 100644 --- a/test/__snapshots__/gh93.test.ts.snap +++ b/test/__snapshots__/gh93.test.ts.snap @@ -69,7 +69,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -2962,11 +2961,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -4663,7 +4662,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -9579,11 +9577,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -10040,7 +10038,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -14937,7 +14934,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -18220,11 +18216,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -19783,7 +19779,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -22676,11 +22671,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -24381,7 +24376,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -29297,11 +29291,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); }; @@ -29766,7 +29760,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -34663,7 +34656,6 @@ main { border: 2px solid; border-radius: 5px; padding: 5px; - white-space: nowrap; font-size: 0.875rem; background-color: var(--background-color); color: var(--text-color); @@ -37946,11 +37938,11 @@ var drawChart = (function (exports) { const boundingRect = ref.current.getBoundingClientRect(); if (pos.left + boundingRect.width > window.innerWidth) { // Shifting horizontally - pos.left = window.innerWidth - boundingRect.width; + pos.left = Math.max(0, window.innerWidth - boundingRect.width); } if (pos.top + boundingRect.height > window.innerHeight) { // Flipping vertically - pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height; + pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height); } setStyle(pos); };