Hover Card

Live Editor

function HoverCardDemo() {
  return (
    <ThemeProvider>
      <HoverCard delay={150} closeDelay={120} placement="bottom" onChange={(open) => console.log(open)}>
        <button slot="trigger">Hover user</button>
        <div>Contextual profile preview</div>
      </HoverCard>
    </ThemeProvider>
  );
}

Result

Loading...

Key Props

open, delay, closeDelay, placement, offset, variant, tone, density, shape, elevation, headless, onOpen, onClose, onChange