Qwik UI

WARNING: This component is in

Draft

status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

A text label that appears when a user hovers, focuses, or touches an element.

import { component$ } from '@builder.io/qwik';
import { Tooltip, badgeVariants } from '~/components/ui';

export default component$(() => {
  return (
    <Tooltip.Root flip={false} gutter={8}>
      <Tooltip.Trigger class={badgeVariants({ look: 'outline' })}>
        Hover over me 👀
      </Tooltip.Trigger>
      <Tooltip.Panel>
        <p>I'm a tooltip</p>
      </Tooltip.Panel>
    </Tooltip.Root>
  );
});

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add tooltip

import { type PropsOf, Slot, component$ } from '@builder.io/qwik';
import { Tooltip as HeadlessTooltip } from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';

const Root = component$<PropsOf<typeof HeadlessTooltip.Root>>(({ ...props }) => {
  return (
    <HeadlessTooltip.Root {...props}>
      <Slot />
    </HeadlessTooltip.Root>
  );
});

const Trigger = HeadlessTooltip.Trigger;

const Panel = component$<PropsOf<typeof HeadlessTooltip.Panel>>(({ ...props }) => {
  return (
    <HeadlessTooltip.Panel
      {...props}
      class={cn(
        'w-fit text-balance rounded-md border bg-background px-3 py-1.5 text-xs text-foreground shadow animate-in fade-in-0 zoom-in-95',
        'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',
        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        props.class,
      )}
    >
      <Slot />
    </HeadlessTooltip.Panel>
  );
});

export const Tooltip = {
  Root,
  Trigger,
  Panel,
};

Usage

import { Tooltip } from '~/components/ui';

<Tooltip.Root>
  <Tooltip.Trigger>Open Trigger</Tooltip.Trigger>
  <Tooltip.Panel>Place your content here.</Tooltip.Panel>
</Tooltip.Root>