# Component/Tooltip/Disabled

> Props: component-tooltip-disabled.props.txt

## Examples


### Base

```tsx
{
  args: {
    disabled: true,
    content: 'This is a disabled tooltip'
  },
  render: args => <Stack gap={28} p={32} align='center'>
      <DisabledTooltip {...args}>
        <Button>Hover me</Button>
      </DisabledTooltip>
    </Stack>
}
```

### Enabled Disabled

```tsx
{
  render: () => <Stack gap={28} p={32} align='center'>
      <Stack direction='column' gap={16} align='center'>
        <DisabledTooltip disabled={true} content='Tooltip이 활성화된 상태입니다.'>
          <Button>Disabled = true (Tooltip 표시)</Button>
        </DisabledTooltip>
        <DisabledTooltip disabled={false} content='이 Tooltip은 표시되지 않습니다.'>
          <Button>Disabled = false (Tooltip 숨김)</Button>
        </DisabledTooltip>
      </Stack>
    </Stack>
}
```

### Interactive Example

```tsx
{
  args: {
    disabled: true,
    content: 'Interactive Tooltip Example'
  },
  render: args => <Stack gap={28} p={32} align='center'>
      <DisabledTooltip {...args}>
        <Button kind='primary'>Primary Button</Button>
      </DisabledTooltip>
    </Stack>
}
```

### Long Content

```tsx
{
  render: () => <Stack gap={28} p={60} align='center'>
      <DisabledTooltip disabled={true} content='이것은 매우 긴 Tooltip 내용입니다. DisabledTooltip 컴포넌트는 disabled 프로퍼티가 true일 때만 Tooltip을 표시하고, false일 때는 단순히 자식 요소만 렌더링합니다.'>
        <Button>긴 내용의 Tooltip</Button>
      </DisabledTooltip>
    </Stack>
}
```

### With Different Children

```tsx
{
  args: {
    disabled: true
  },
  render: args => <Stack direction='column' gap={16} p={32} align='center'>
      {['Button', 'Radio', 'Checkbox', 'Switch', 'Textarea', 'Input', 'Dropdown'].map((item, index) => <DisabledTooltip {...args} content={`${item}에 적용된 Tooltip`} key={index}>
          {item === 'Button' ? <Button>{item}</Button> : item === 'Radio' ? <Radio>{item}</Radio> : item === 'Checkbox' ? <Checkbox>{item}</Checkbox> : item === 'Switch' ? <Switch>{item}</Switch> : item === 'Textarea' ? <Textarea></Textarea> : item === 'Input' ? <Input width={200} /> : item === 'Dropdown' ? <Dropdown options={[{
        label: item,
        value: item
      }]} width={200} placeholder='Dropdown' /> : <></>}
        </DisabledTooltip>)}
    </Stack>
}
```

### With Different Children Click

```tsx
{
  args: {
    disabled: true,
    openerTriggerEvent: 'click'
  },
  render: args => <Stack direction='column' gap={16} p={32} align='center'>
      {['Button', 'Radio', 'Checkbox', 'Switch', 'Textarea', 'Input', 'Dropdown'].map((item, index) => <DisabledTooltip {...args} content={`${item}에 적용된 Tooltip`} key={index}>
          {item === 'Button' ? <Button>{item}</Button> : item === 'Radio' ? <Radio>{item}</Radio> : item === 'Checkbox' ? <Checkbox>{item}</Checkbox> : item === 'Switch' ? <Switch>{item}</Switch> : item === 'Textarea' ? <Textarea></Textarea> : item === 'Input' ? <Input width={200} /> : item === 'Dropdown' ? <Dropdown options={[{
        label: item,
        value: item
      }]} width={200} placeholder='Dropdown' /> : <></>}
        </DisabledTooltip>)}
    </Stack>
}
```