# Vue Tooltip Component - Flowbite
## Demo
```vue
Tooltip content
```
## 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.
```vue
Tooltip content
Tooltip content
```
## 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`
```vue
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
```
## 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`.
```vue
Tooltip content
Tooltip content
```