# 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 =>
}
```
### Color
```tsx
{
args: {
content: 'Tooltip',
opened: true,
openerTriggerEvent: 'none',
canClickOutside: false
},
render: args => {
return
;
}
}
```
### Hiding Fully Clipped Reference Elements
```tsx
{
render: () =>
}
```
### Max Width
```tsx
{
render: () => {
const description = '텍스트가 길어지면 width는 최대 320px까지 늘어나지만 화면의 좌우 안전 여백을 넘지 않아야 합니다.';
return
;
}
}
```
### Placement
```tsx
{
args: {
content: 'Tooltip',
opened: true,
openerTriggerEvent: 'none',
canClickOutside: false,
kind: 'neutral'
},
render: args => {
const placements: Exclude[] = ['left', 'top', 'bottom', 'right'];
return
{placements.map(placement => {
return
;
})}
;
}
}
```
### Trigger
```tsx
{
render: () =>
}
```