Sha256: 18e2777958884583f3c8bd32b2085f19612b3722c34c114e7547eee1fd1d35c2

Contents?: true

Size: 847 Bytes

Versions: 145

Compression:

Stored size: 847 Bytes

Contents

import React, { useState } from 'react'
import {
  Body,
  CircleIconButton,
  Flex,
  PbReactPopover,
} from '../..'

const PopoverDefault = () => {
  const [showPopover, setShowPopover] = useState(false)

  const handleTogglePopover = () => {
    setShowPopover(!showPopover)
  }
  const popoverReference = (
    <CircleIconButton
        icon="info"
        onClick={handleTogglePopover}
        variant="secondary"
    />
  )

  return (
    <Flex
        orientation="row"
        vertical="center"
    >
      <Body text="Click info for more details" />
      &nbsp;
      <PbReactPopover
          offset
          placement="top"
          reference={popoverReference}
          show={showPopover}
      >
        {'I\'m a popover. I can show content of any size.'}
      </PbReactPopover>
    </Flex>
  )
}

export default PopoverDefault

Version data entries

145 entries across 145 versions & 1 rubygems

Version Path
playbook_ui-5.1.0.pre.alpha4 app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
playbook_ui-5.1.0.pre.alpha2 app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
playbook_ui-5.1.0.pre.alpha1 app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
playbook_ui-5.0.1 app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
playbook_ui-5.0.1.pre.alpha1 app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx