Popover

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

インポート

import {
  Popover,
  PopoverTrigger,
  PopoverAnchor,
  PopoverCloseButton,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
} from "@yamada-ui/react"

Copied!

Popover: ポップオーバーの状態を制御するラッパーコンポーネントです。
PopoverTrigger: 参照する要素を制御するラッパーコンポーネントです。
PopoverAnchor: PopoverTriggerの要素とは別に、要素を参照させたい場合に使用するラッパーコンポーネントです。
PopoverCloseButton: ポップオーバーを閉じるボタンのコンポーネントです。
PopoverContent: ポップオーバーのコンテンツを表示するコンポーネントです。
PopoverHeader: ポップオーバーのヘッダーを表示するコンポーネントです。
PopoverBody: ポップオーバーのメインコンテンツを表示するコンポーネントです。
PopoverFooter: ポップオーバーのフッターを表示するコンポーネントです。

PopoverCloseButtonは、省略することができます。

使い方

PopoverTriggerに、ポップオーバーが参照(座標など)する要素を設定します。PopoverContentに、コンテンツを設定します。

PopoverTriggerまたはPopoverAnchorのchildrenが関数コンポーネントの場合は、関数コンポーネントにforwardRefを使用してPopoverTriggerまたはPopoverAnchorからのrefを受け取れるようにしてください。

編集可能な例

<Popover>
  <PopoverTrigger>
    <Button>Open Popover</Button>
  </PopoverTrigger>

  <PopoverContent>
    <PopoverHeader>ベジータ!</PopoverHeader>
    <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    <PopoverFooter>第280話</PopoverFooter>
  </PopoverContent>
</Popover>

Copied!

内部状態へアクセスする

childrenには、isOpenやonCloseなどのメソッドが提供されます。これを利用して、内部状態にアクセスすることができます。

編集可能な例

<Popover>
  {({ isOpen }) => (
    <>
      <PopoverTrigger>
        <Button>{isOpen ? "Close" : "Open"} Popover</Button>
      </PopoverTrigger>

      <PopoverContent>
        <PopoverHeader>ベジータ!</PopoverHeader>
        <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
        <PopoverFooter>第280話</PopoverFooter>
      </PopoverContent>
    </>
  )}
</Popover>

Copied!

別の要素を参照して表示する

PopoverTriggerの要素と違う要素を参照(座標など)させたい場合は、PopoverAnchorを使用します。

編集可能な例

<HStack>
  <Popover closeOnBlur={false}>
    <PopoverAnchor>
      <Text>Here display Popover</Text>
    </PopoverAnchor>

    <PopoverTrigger>
      <Button>Open Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
      <PopoverFooter>第280話</PopoverFooter>
    </PopoverContent>
  </Popover>
</HStack>

Copied!

アニメーションを変更する

表示または非表示のアニメーションを変更するには、animationにtopやleftなどを設定します。デフォルトでは、scaleが設定されています。

編集可能な例

<Wrap gap="md">
  <Popover animation="scale">
    <PopoverTrigger>
      <Button>Open scale Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover animation="top">
    <PopoverTrigger>
      <Button>Open top Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover animation="left">
    <PopoverTrigger>
      <Button>Open left Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover animation="bottom">
    <PopoverTrigger>
      <Button>Open bottom Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover animation="right">
    <PopoverTrigger>
      <Button>Open right Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>
</Wrap>

Copied!

表示位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottomが設定されています。

編集可能な例

<Wrap gap="md">
  <Popover placement="top">
    <PopoverTrigger>
      <Button>Open top center Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="top-start">
    <PopoverTrigger>
      <Button>Open top start Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="top-end">
    <PopoverTrigger>
      <Button>Open top end Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="left">
    <PopoverTrigger>
      <Button>Open left center Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="left-start">
    <PopoverTrigger>
      <Button>Open left start Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="left-end">
    <PopoverTrigger>
      <Button>Open left end Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="bottom">
    <PopoverTrigger>
      <Button>Open bottom center Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="bottom-start">
    <PopoverTrigger>
      <Button>Open bottom start Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="bottom-end">
    <PopoverTrigger>
      <Button>Open bottom end Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="right">
    <PopoverTrigger>
      <Button>Open right center Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="right-start">
    <PopoverTrigger>
      <Button>Open right start Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover placement="right-end">
    <PopoverTrigger>
      <Button>Open right end Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>
</Wrap>

Copied!

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

編集可能な例

<Popover duration={0.7}>
  <PopoverTrigger>
    <Button>Open Popover</Button>
  </PopoverTrigger>

  <PopoverContent>
    <PopoverHeader>ベジータ!</PopoverHeader>
    <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
  </PopoverContent>
</Popover>

Copied!

オフセットを変更する

要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

編集可能な例

<HStack>
  <Popover gutter={32}>
    <PopoverTrigger>
      <Button>Open Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>

  <Popover offset={[16, 16]}>
    <PopoverTrigger>
      <Button>Open Popover</Button>
    </PopoverTrigger>

    <PopoverContent>
      <PopoverHeader>ベジータ!</PopoverHeader>
      <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
    </PopoverContent>
  </Popover>
</HStack>

Copied!

ホバーしたときにアクティブにする

デフォルトでは、PopoverTriggerの要素がクリックされたときにアクティブになります。ホバーされたときにアクティブにしたい場合は、triggerにhoverを設定します。

編集可能な例

<Popover trigger="hover">
  <PopoverTrigger>
    <Button>Open Popover</Button>
  </PopoverTrigger>

  <PopoverContent>
    <PopoverHeader>ベジータ!</PopoverHeader>
    <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
  </PopoverContent>
</Popover>

Copied!

遅延レンダリング

デフォルトでは、アクティブに関わらずDOMにレンダリングされます。つまり、非表示もレンダリングされているが、スタイルによって非表示になっていることになります。

アクティブになるまで、レンダリングを遅延させたい場合は、isLazyをtrueに設定します。

編集可能な例

<Popover isLazy>
  <PopoverTrigger>
    <Button>Open Popover</Button>
  </PopoverTrigger>

  <PopoverContent>
    <PopoverHeader>ベジータ!</PopoverHeader>
    <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
  </PopoverContent>
</Popover>

Copied!

閉じるボタンを無効にする

閉じるボタンを無効(非表示)にする場合は、closeOnButtonをfalseに設定します。

編集可能な例

<Popover closeOnButton={false}>
  <PopoverTrigger>
    <Button>Open Popover</Button>
  </PopoverTrigger>

  <PopoverContent>
    <PopoverHeader>ベジータ!</PopoverHeader>
    <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
  </PopoverContent>
</Popover>

Copied!

閉じるボタンをカスタマイズする

PopoverCloseButtonにpropsなどを渡して、カスタマイズしたい場合は、省略せずに設定します。

編集可能な例

<Popover>
  <PopoverTrigger>
    <Button>Open Popover</Button>
  </PopoverTrigger>

  <PopoverContent>
    <PopoverCloseButton color="red.500" />
    <PopoverHeader>ベジータ!</PopoverHeader>
    <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
  </PopoverContent>
</Popover>

Copied!

制御する

編集可能な例

const { isOpen, onClose, onToggle } = useDisclosure()

return (
  <>
    <Button mr="md" onClick={onToggle}>
      Open Popover
    </Button>

    <Popover isOpen={isOpen} onClose={onClose} closeOnBlur={false}>
      <PopoverTrigger>
        <Button colorScheme="primary">Target Popover</Button>
      </PopoverTrigger>

      <PopoverContent>
        <PopoverHeader>ベジータ!</PopoverHeader>
        <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody>
      </PopoverContent>
    </Popover>
  </>
)

Copied!

GitHubでこのページを編集する

前ActionBar 次Tooltip