tooltip.md

<script setup> import FwbTooltipExample from './tooltip/examples/FwbTooltipExample.vue' import FwbTooltipExamplePosition from './tooltip/examples/FwbTooltipExamplePosition.vue' import FwbTooltipExampleStyle from './tooltip/examples/FwbTooltipExampleStyle.vue' import FwbTooltipExampleGroup from './tooltip/examples/FwbTooltipExampleGroup.vue' import FwbTooltipExampleTrigger from './tooltip/examples/FwbTooltipExampleTrigger.vue' </script>

Vue Tooltip - Flowbite

Demo

```vue Default Tooltip Tooltip content <script setup> import { FwbButton, FwbTooltip } from 'flowbite-vue' </script>

## 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.

<fwb-tooltip-example-style />
```vue
<template>
  <fwb-tooltip theme="light">
    <template #trigger>
      <fwb-button>
        Light Tooltip
      </fwb-button>
    </template>
    <template #content>
      Tooltip content
    </template>
  </fwb-tooltip>
  <fwb-tooltip theme="dark">
    <template #trigger>
      <fwb-button>
        Dark Tooltip
      </fwb-button>
    </template>
    <template #content>
      Tooltip content
    </template>
  </fwb-tooltip>
</template>

<script setup>
import { FwbButton, FwbTooltip } from 'flowbite-vue'
</script>

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 top Tooltip on top Tooltip right Tooltip on right Tooltip bottom Tooltip on bottom Tooltip left Tooltip on left <script setup> import { FwbButton, FwbTooltip } from 'flowbite-vue' </script>

## Inside of Button Group

You can use the tooltip component inside of the button group component.

<fwb-tooltip-example-group />
```vue
<template>
  <fwb-button-group>
    <fwb-button>
      Normal Button
    </fwb-button>
    <fwb-tooltip>
      <template #trigger>
        <fwb-button>
          Button With Tooltip
        </fwb-button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </fwb-tooltip>
  </fwb-button-group>
</template>

<script setup>
import { FwbButton, FwbButtonGroup, FwbTooltip } from '../../../../src/index'
</script>

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 hover Tooltip content Tooltip click Tooltip content <script lang="ts" setup> import { FwbButton, FwbTooltip } from 'flowbite-vue' </script>