Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

import { Button, Tooltip } from 'flowbite-react'

const TooltipStyleCode = () => {
  return (
    <div>
      <div className='flex gap-2 '>
        <Tooltip content='Tooltip content' style='light'>
          <Button color='primary'>Light Tooltip</Button>
        </Tooltip>
        <Tooltip content='Tooltip content' style='dark'>
          <Button color='secondary'>Dark Tooltip</Button>
        </Tooltip>
      </div>
    </div>
  )
}

export default TooltipStyleCode

import { Button, Tooltip } from 'flowbite-react'

const TooltipTriggerCode = () => {
  return (
    <div>
      <div className='flex gap-2'>
        <Tooltip content='Tooltip content' trigger='hover'>
          <Button color='primary'>Tooltip Hover</Button>
        </Tooltip>
        <Tooltip content='Tooltip content' trigger='click'>
          <Button color='secondary'>Tooltip Click</Button>
        </Tooltip>
      </div>
    </div>
  )
}

export default TooltipTriggerCode

import { Button, Tooltip } from 'flowbite-react'

const DisableTooltipCode = () => {
  return (
    <div>
      <div>
        <Tooltip content='Tooltip content' arrow={false}>
          <Button color='info'>Default Tooltip</Button>
        </Tooltip>
      </div>
    </div>
  )
}

export default DisableTooltipCode

import { Tooltip, Button } from 'flowbite-react'

const AnimationTooltipCode = () => {
  return (
    <div>
      <div className='grid grid-cols-12 gap-5 items-center'>
        <div className='lg:col-span-3  md:col-span-6 col-span-12'>
          <Tooltip content='Tooltip content' animation={false}>
            <Button color='primary' className='w-full'>
              Not animated tooltip
            </Button>
          </Tooltip>
        </div>
        <div className='lg:col-span-3  md:col-span-6 col-span-12'>
          <Tooltip content='Tooltip content' animation='duration-150'>
            <Button color='secondary' className='w-full'>
              Fast animation
            </Button>
          </Tooltip>
        </div>
        <div className='lg:col-span-3  md:col-span-6 col-span-12'>
          <Tooltip content='Tooltip content' animation='duration-300'>
            <Button color='info' className='w-full'>
              Normal speed animation
            </Button>
          </Tooltip>
        </div>
        <div className='lg:col-span-3  md:col-span-6 col-span-12'>
          <Tooltip content='Tooltip content' animation='duration-500'>
            <Button color='success' className='w-full'>
              Slow animation
            </Button>
          </Tooltip>
        </div>
        <div className='lg:col-span-3  md:col-span-6 col-span-12'>
          <Tooltip content='Tooltip content' animation='duration-1000'>
            <Button color='error' className='w-full'>
              Really slow animation
            </Button>
          </Tooltip>
        </div>
      </div>
    </div>
  )
}

export default AnimationTooltipCode

import { Tooltip, Button } from 'flowbite-react'

const PlacementTooltipCode = () => {
  return (
    <div>
      <div className='flex flex-wrap items-center gap-5'>
        <div>
          <Tooltip content='Tooltip content' placement='top'>
            <Button color={'primary'}>Tooltip top</Button>
          </Tooltip>
        </div>
        <div>
          <Tooltip content='Tooltip content' placement='right'>
            <Button color='secondary'>Tooltip right</Button>
          </Tooltip>
        </div>
        <div>
          <Tooltip content='Tooltip content' placement='bottom'>
            <Button color='info'>Tooltip bottom</Button>
          </Tooltip>
        </div>
        <div>
          <Tooltip content='Tooltip content' placement='left'>
            <Button color='success'>Tooltip left</Button>
          </Tooltip>
        </div>
      </div>
    </div>
  )
}

export default PlacementTooltipCode