```
## Placement
The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with `top`, `top-start` , `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`, `auto`, `auto-start`, `auto-end`.
The default value is: `top`
Tooltip top
Tooltip top
Tooltip right
Tooltip on right
Tooltip bottom
Tooltip on bottom
Tooltip left
Tooltip on left
```vue
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip left
```
## Tooltip styles
You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `tooltip-light` or `tooltip-dark` attribute.
light style tooltip
light style content
dark style tooltip
dark style Tooltip
```vue
light style content
dark style content
```
## triggerType
You can choose the triggering event by using the `hover` or `click` attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `click`.