PreviewTrigger

A PreviewTrigger displays a non-modal popover on hover, focus, or long press. Unlike a tooltip, the popover may contain interactive content.

Theme

Just shipped a new release with help from @mayachen and @cwebb!

placement

offset

crossOffset

shouldFlip

import {PreviewTrigger} from 'react-aria-components/PreviewTrigger';
import {Popover} from './Popover';
import {Link} from './Link';
import {Button} from './Button';

function ProfilePreview({handle, name, bio, avatar, href, ...popoverProps}) {
  return (
    <PreviewTrigger>
      <Link href={href}>@{handle}</Link>
      <Popover style={{width: 280}} {...popoverProps}>
        <div style={{display: 'flex', gap: 8, alignItems: 'center'}}>
          <img alt="" src={avatar} style={{width: 40, height: 40, borderRadius: '50%'}} />
          <div style={{minWidth: 0}}>
            <div style={{fontWeight: 600, fontSize: 'var(--font-size)'}}>{name}</div>
            <div style={{fontSize: 'var(--font-size-sm)'}}>@{handle}</div>
          </div>
          <Button style={{marginLeft: 'auto'}} variant="secondary">Follow</Button>
        </div>
        <div style={{fontSize: 'var(--font-size)', marginTop: 12}}>{bio}</div>
      </Popover>
    </PreviewTrigger>
  );
}

function Example(props) {
  return (
    <p style={{maxWidth: 480}}>
      Just shipped a new release with help from{' '}
      <ProfilePreview
        handle="mayachen"
        name="Maya Chen"
        bio="UI engineer, accessibility advocate, and component library enthusiast."
        avatar="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        href="#"
        {...props} />
      {' '}and{' '}
      <ProfilePreview
        handle="cwebb"
        name="Charles Webb"
        bio="Design systems, docs, and developer experience."
        avatar="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
        href="#"
        {...props} />
      !
    </p>
  );
}

Interactions

Previews appear after a warmup delay when hovering with a pointer or receiving keyboard focus. Once a preview is displayed, other previews display immediately. If the user waits for the cooldown period before hovering another element, the warmup timer restarts. On touch devices, previews open on long press.

When a preview is open, pressing Tab moves focus into the preview so users can interact with its contents. Press Escape to close the preview and return focus to the trigger.

Merged fixes for #1234 and #5678.

delay

closeDelay

isDisabled

import {PreviewTrigger} from 'react-aria-components/PreviewTrigger';
import {Popover} from './Popover';
import {Link} from './Link';
import {Button} from './Button';

function IssuePreview({number, title, status, author, href, ...props}) {
  return (
    <PreviewTrigger {...props}>
      <Link href={href}>#{number}</Link>
      <Popover style={{width: 280}}>
        <div style={{fontWeight: 600, fontSize: 'var(--font-size)'}}>{title}</div>
        <div style={{fontSize: 'var(--font-size-sm)', marginTop: 4}}>#{number} · {status}</div>
        <div style={{fontSize: 'var(--font-size-sm)', marginTop: 4}}>Opened by {author}</div>
        <Button style={{marginTop: 12}} variant="secondary">View issue</Button>
      </Popover>
    </PreviewTrigger>
  );
}

function Example(props) {
  return (
    <p style={{maxWidth: 480}}>
      {'Merged fixes for '}
      <IssuePreview
        {...props}
        number={1234}
        title="Add PreviewTrigger component"
        status="Open"
        author="mayachen"
        href="#" />
      {' and '}
      <IssuePreview
        {...props}
        number={5678}
        title="Improve Popover safe area behavior"
        status="Closed"
        author="cwebb"
        href="#" />
      .
    </p>
  );
}

Custom trigger

PreviewTrigger works with any focusable React Aria component (e.g. Link, Button, etc.). Use the <Focusable> component to wrap a custom trigger element such as a third party component or DOM element.

Custom trigger

import {PreviewTrigger} from 'react-aria-components/PreviewTrigger';
import {Focusable} from 'react-aria-components/Tooltip';
import {Popover} from './Popover';

<PreviewTrigger>
  <Focusable>
    <span role="link">Custom trigger</span>
  </Focusable>
  <Popover style={{padding: 16}}>
    This preview was triggered by a custom element.
  </Popover>
</PreviewTrigger>

Accessibility

Any <Focusable> child must have an ARIA role or use an appropriate semantic HTML element so that screen readers can announce the preview. Trigger components must forward their ref and spread all props to a DOM element.

const CustomTrigger = React.forwardRef((props, ref) => (
  <a {...props} ref={ref} />
));

API

<PreviewTrigger>
  <Link />, <Button />, or <Focusable />
  <Popover />
</PreviewTrigger>

PreviewTrigger

Name	Type	Default
`children`	`ReactNode`	Default: —
The trigger and Popover that make up the preview trigger.
`delay`	`number`	Default: `600`
The delay time in milliseconds before the preview opens.
`closeDelay`	`number`	Default: `200`
The delay time in milliseconds before the preview closes.
`isDisabled`	`boolean`	Default: —
Whether the tooltip should be disabled, independent from the trigger.

PreviewTrigger

Vanilla CSS theme

Interactions

Custom trigger

Accessibility

API

PreviewTrigger