init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import type { Meta, StoryObj } from "@storybook/react";
import { Tooltip } from "./Tooltip";
import { Button } from "../button/button";
 
const meta: Meta<typeof Tooltip> = {
  component: Tooltip,
  title: "UI/Tooltip",
  argTypes: {
    disabled: { control: "boolean" },
  },
};
 
export default meta;
type Story = StoryObj<typeof Tooltip>;
 
export const Primary: Story = {
  render: ({ children, ...props }) => {
    return (
      <div className="flex items-center gap-tight">
        <Tooltip {...props} title="Example of a tooltip">
          <Button>hover over me</Button>
        </Tooltip>
      </div>
    );
  },
};
 
export const WithLongText: Story = {
  render: ({ children, ...props }) => {
    return (
      <div className="flex items-center gap-tight">
        <Tooltip {...props} title="This is a tooltip with a very looooong long long text that goes past the size.">
          <Button>hover over me</Button>
        </Tooltip>
      </div>
    );
  },
};
 
export const WithLongTextString: Story = {
  render: ({ children, ...props }) => {
    return (
      <div className="flex items-center gap-tight">
        <Tooltip {...props} title="Thisisatooltipwithaverylooooonglonglongtextthatgoespastthesize.">
          <Button>hover over me</Button>
        </Tooltip>
      </div>
    );
  },
};
 
export const Interactive: Story = {
  render: ({ children, ...props }) => {
    return (
      <div className="flex items-center gap-tight">
        <Tooltip
          {...props}
          title={
            <div>
              <button type="button" onClick={() => alert("hello there")}>
                click me
              </button>
            </div>
          }
          interactive
        >
          <Button>hover over me</Button>
        </Tooltip>
      </div>
    );
  },
};
 
export const WithDisabledButton: Story = {
  render: ({ children, ...props }) => {
    return (
      <div className="flex items-center gap-tight">
        <Tooltip {...props} title="This button is disabled for the reason that it is disabled">
          <Button disabled>hover over me</Button>
        </Tooltip>
      </div>
    );
  },
};
 
export const WithDisabledInput: Story = {
  render: ({ children, ...props }) => {
    return (
      <div className="flex items-center gap-tight">
        <Tooltip {...props} title="This input is disabled for the reason that it is disabled">
          <input type="text" disabled className="border p-2" />
        </Tooltip>
      </div>
    );
  },
};