From eb172a2b2e507d4ed2bb4e903b6fe5c0085d30d4 Mon Sep 17 00:00:00 2001 From: unt Date: Sun, 1 Dec 2024 18:46:53 +0800 Subject: [PATCH] Fix: add hit areas to the tooltip (#56) Previously, when the tooltip is displayed below the text (= when the text is at the top of the window), it always disappears when trying to move the mouse pointer from the text onto it, because their is a gap between the text and the tooltip. --- src/Components/TooltipChar.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Components/TooltipChar.tsx b/src/Components/TooltipChar.tsx index 445d984..1c1a10c 100644 --- a/src/Components/TooltipChar.tsx +++ b/src/Components/TooltipChar.tsx @@ -13,13 +13,19 @@ import { noop } from "../consts"; import type { Entry } from "../consts"; const Wrapper = styled.div` - padding-bottom: 3px; + padding-top: 10px; + margin-top: -10px; + padding-bottom: 5px; + margin-bottom: -5px; overflow-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; `; const Item = styled.p<{ textColor: string }>` margin: 2px 10px; + &:last-child { + margin-bottom: 5px; + } color: ${({ textColor }) => textColor}; ${({ onClick }) => onClick &&