Qwik tooltip - Flowbite

Use the tooltip component to show a descriptive text when hovering over an element such as a button and customize the content and style with Qwik and Tailwind CSS

Use the tooltip component from Flowbite Qwik to indicate helpful information when hovering over an element such as a button or link to improve the UI/UX of your website.

Choose from multiple options, layouts, styles, colors, and animations from the examples below and customize the content and options using the custom Qwik API props and the utility classes from Tailwind CSS.

To start using the tooltip component make sure you import it from flowbite-qwik :

import { Tooltip } from "flowbite-qwik"

Default tooltip

Wrap the trigger component with the <Tooltip> component and pass the tooltip content to the content prop of the <Tooltip> component.

tsx
import { component$ } from '@builder.io/qwik'
import { Button, Tooltip } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex justify-center p-8 text-center">
      <Tooltip style="dark">
        <Button q:slot="trigger">Hover me</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
    </div>
  )
})

Default styles

Use the style prop to change the style of the tooltip. The default style is light and you can also use dark.

tsx
import { component$ } from '@builder.io/qwik'
import { Button, Tooltip } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex justify-center gap-3 p-8 text-center">
      <Tooltip style="dark">
        <Button q:slot="trigger">Dark tooltip</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
      <Tooltip style="light">
        <Button q:slot="trigger">Light tooltip</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
      <Tooltip style="auto">
        <Button q:slot="trigger">Auto tooltip</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
    </div>
  )
})

Placement

Update the placement of the tooltip using the placement prop. The default placement is top and you can also use right, bottom, and left.

tsx
import { component$ } from '@builder.io/qwik'
import { Button, Tooltip } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex justify-center gap-3 p-8 text-center">
      <Tooltip placement="top">
        <Button q:slot="trigger">Tooltip top</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
      <Tooltip placement="right">
        <Button q:slot="trigger">Tooltip right</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
      <Tooltip placement="bottom">
        <Button q:slot="trigger">Tooltip bottom</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
      <Tooltip placement="left">
        <Button q:slot="trigger">Tooltip left</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
    </div>
  )
})

Trigger

Use the trigger prop to change the trigger type of the tooltip if you want to show the tooltip when clicking on the trigger element instead of hovering over it.

tsx
import { component$ } from '@builder.io/qwik'
import { Button, Tooltip } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex justify-center gap-3 p-8 text-center">
      <Tooltip trigger="hover">
        <Button q:slot="trigger">Tooltip hover</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
      <Tooltip trigger="click">
        <Button q:slot="trigger">Tooltip click</Button>
        <div q:slot="content">This is a tooltip</div>
      </Tooltip>
    </div>
  )
})