# Component/Tooltip/Basic

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

## Examples


### Base

```tsx
{
  args: {
    content: 'Tooltip',
    placement: 'left',
    opened: true,
    openerTriggerEvent: 'none',
    canClickOutside: false
  },
  render: args => <Stack direction='row' gap={28} p={32} ml={30}>
      <Tooltip {...args}>
        <Button>ref를 가져올 수 있는 컴포넌트</Button>
      </Tooltip>
    </Stack>
}
```

### Color

```tsx
{
  args: {
    content: 'Tooltip',
    opened: true,
    openerTriggerEvent: 'none',
    canClickOutside: false
  },
  render: args => {
    return <Stack direction='row' gap={28} p={32} ml={200} align='center'>
        <Stack direction='row' gap={12} align='center'>
          <Tooltip {...args} kind='neutral' canClickOutside={false} placement='left' content='Neutral(X 버튼 노출 안함)'>
            <Button>neutral</Button>
          </Tooltip>
          <Tooltip {...args} kind='accent' placement='top' content='Accent'>
            <Button>accent</Button>
          </Tooltip>
          <Tooltip {...args} kind='negative' placement='right' content='Negative'>
            <Button>negative</Button>
          </Tooltip>
        </Stack>
      </Stack>;
  }
}
```

### Hiding Fully Clipped Reference Elements

```tsx
{
  render: () => <div style={{
    height: '300px',
    overflowY: 'scroll',
    border: '1px solid black'
  }}>
      <Stack direction='column' gap={100} align='center' height={900} style={{
      position: 'relative'
    }}>
        <Tooltip openerTriggerEvent='none' canClickOutside={false} noUsePortal kind='accent' placement='right' opened content='Long Tooltip Content Long Tooltip Content Long Tooltip Content Long Tooltip Content Long Tooltip Content'>
          <Button>Close With CloseButton</Button>
        </Tooltip>
        <Tooltip openerTriggerEvent='none' canClickOutside={false} noUsePortal kind='neutral' placement='bottom' opened content='Long Tooltip Content Long Tooltip Content Long Tooltip Content Long Tooltip Content Long Tooltip Content'>
          <Button>Close With CloseButton</Button>
        </Tooltip>
        <Tooltip openerTriggerEvent='none' canClickOutside={false} noUsePortal kind='accent' placement='left' opened content='Long Tooltip Content Long Tooltip Content Long Tooltip Content Long Tooltip Content Long Tooltip Content'>
          <Button>Close With CloseButton</Button>
        </Tooltip>
      </Stack>
    </div>
}
```

### Max Width

```tsx
{
  render: () => {
    const description = '텍스트가 길어지면 width는 최대 320px까지 늘어나지만 화면의 좌우 안전 여백을 넘지 않아야 합니다.';
    return <Stack direction='row' p={12} align='center'>
        <Tooltip content={description} placement='bottom' size='large'>
          <Button>Hover me</Button>
        </Tooltip>
      </Stack>;
  }
}
```

### Placement

```tsx
{
  args: {
    content: 'Tooltip',
    opened: true,
    openerTriggerEvent: 'none',
    canClickOutside: false,
    kind: 'neutral'
  },
  render: args => {
    const placements: Exclude<Side, 'bottom-end'>[] = ['left', 'top', 'bottom', 'right'];
    return <Stack direction='row' gap={28} p={32} ml={30} align='center'>
        {placements.map(placement => {
        return <Stack direction='column' gap={12} align='center' key={placement}>
              <Tooltip {...args} placement={placement}>
                <Button>{placement}</Button>
              </Tooltip>
            </Stack>;
      })}
      </Stack>;
  }
}
```

### Trigger

```tsx
{
  render: () => <Stack direction='row' p={12} align='center'>
      <Stack direction='row' mr={20} align='center'>
        <Tooltip content='Tooltip' placement='bottom'>
          <Button>Hover me</Button>
        </Tooltip>
      </Stack>
      <Stack direction='row' align='center'>
        <Tooltip content='Tooltip' placement='bottom' openerTriggerEvent='click' canClickOutside={false}>
          <Button>Click me</Button>
        </Tooltip>
      </Stack>
    </Stack>
}
```