diff --git a/utils/vara-ui/src/components/tooltip/tooltip.stories.tsx b/utils/vara-ui/src/components/tooltip/tooltip.stories.tsx
index e465fa4199..27e84250b8 100644
--- a/utils/vara-ui/src/components/tooltip/tooltip.stories.tsx
+++ b/utils/vara-ui/src/components/tooltip/tooltip.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Tooltip } from './tooltip';
+import { Button } from '../button';
 
 type Type = typeof Tooltip;
 type Story = StoryObj<Type>;
@@ -11,7 +12,11 @@ const meta: Meta<Type> = {
   args: {
     position: 'top',
     value: 'Tooltip',
-    children: <button style={{ marginLeft: '256px', marginTop: '256px' }}>Hover my insanely long text</button>,
+    children: (
+      <div style={{ maxWidth: '256px', margin: '64px auto 0' }}>
+        <Button text="Hover me" block />
+      </div>
+    ),
   },
   argTypes: {
     position: {
diff --git a/utils/vara-ui/src/components/tooltip/tooltip.tsx b/utils/vara-ui/src/components/tooltip/tooltip.tsx
index 8083585b75..a5a2549d35 100644
--- a/utils/vara-ui/src/components/tooltip/tooltip.tsx
+++ b/utils/vara-ui/src/components/tooltip/tooltip.tsx
@@ -35,7 +35,7 @@ function Tooltip({ value, position = 'top', children }: Props) {
   const [style, setStyle] = useState<CSSProperties>();
 
   const handleMouseOver = (event: MouseEvent) => {
-    const anchor = event.target as HTMLElement | null;
+    const anchor = event.currentTarget as HTMLElement | null;
     if (!anchor) return;
 
     setStyle(getPosition(anchor, position));