Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

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.

Popover

A non-modal primitive with overlays that open and close around a DOM element.

Installation

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

qwik-ui add popover
import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
import {
  PopoverTrigger as QwikUIPopoverTrigger,
  Popover as QwikUIPopover,
} from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';
 
export const PopoverTrigger = QwikUIPopoverTrigger;
 
export const Popover = component$<PropsOf<typeof QwikUIPopover>>(
  ({ floating, ...props }) => {
    useStyles$(`
    .my-transition {
      transition: opacity 150ms, display 150ms, overlay 150ms;
      transition-behavior: allow-discrete;
    }
  
    .popover-showing {
      opacity: 1;
    }
  
    .popover-closing {
      opacity: 0;
    }
    `);
 
    return (
      <QwikUIPopover
        {...props}
        floating={floating}
        class={cn(
          'my-transition bg-popover text-popover-foreground w-72 rounded-md border p-4 opacity-0 shadow-md outline-none',
          floating && 'absolute m-0',
          props.class,
        )}
      >
        <Slot />
      </QwikUIPopover>
    );
  },
);

Usage

import { Popover, PopoverTrigger } from '@qwik-ui/styled';
<PopoverTrigger>Open Trigger</PopoverTrigger>
<Popover>Place your content here.</Popover>