Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton IconTile Illustration Indicator Link List Logo Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Typeahead Toast Tooltip
Loaders
Loader LogoLoader EllipsesLoader WaveformLoader
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

Popover (deprecated)

Deprecated

This component is deprecated. Please use @atlaskit/popup

Trigger

Popover

Usage

import { Popover } from '@loomhq/lens'

<Popover
  isOpen
  placement="rightCenter"
  content={(<div>Popover</div>)}
>
  Content
</Popover>

Placement

() => {
  const [placement, setPlacement] = React.useState(
    { value: 'rightCenter', title: 'rightCenter' }
  )
  return (
    <Split gap="medium" justifyContent="space-between">
      <SplitSection>
        <Popover
          isOpen
          placement={placement.value}
          content={(
            <DemoBox padding="xsmall">
              Popover
            </DemoBox>
          )}
        >
          <DemoBox padding="large">Trigger</DemoBox>
        </Popover>
      </SplitSection>
      <SplitSection basis={20}>
        <Select
          selectedOptionValue="rightCenter"
          onChange={option => setPlacement(option)}
          options={[
            { value: 'topLeft', title: 'topLeft' },
            { value: 'topCenter', title: 'topCenter' },
            { value: 'topRight', title: 'topRight' },
            { value: 'bottomLeft', title: 'bottomLeft' },
            { value: 'bottomCenter', title: 'bottomCenter' },
            { value: 'bottomRight', title: 'bottomRight' },
            { value: 'leftTop', title: 'leftTop' },
            { value: 'leftCenter', title: 'leftCenter' },
            { value: 'leftBottom', title: 'leftBottom' },
            { value: 'rightTop', title: 'rightTop' },
            { value: 'rightCenter', title: 'rightCenter' },
            { value: 'rightBottom', title: 'rightBottom' },
          ]}
        />
      </SplitSection>
    </Split>
  )
}

() => {
  const [placement, setPlacement] = React.useState(
    { value: 'rightCenter', title: 'rightCenter' }
  )
  return (
    <Split gap="medium" justifyContent="space-between">
      <SplitSection>
        <Popover
          isOpen
          placement={placement.value}
          content={(
            <DemoBox padding="xsmall">
              Popover
            </DemoBox>
          )}
        >
          <DemoBox padding="large">Trigger</DemoBox>
        </Popover>
      </SplitSection>
      <SplitSection basis={20}>
        <Select
          selectedOptionValue="rightCenter"
          onChange={option => setPlacement(option)}
          options={[
            { value: 'topLeft', title: 'topLeft' },
            { value: 'topCenter', title: 'topCenter' },
            { value: 'topRight', title: 'topRight' },
            { value: 'bottomLeft', title: 'bottomLeft' },
            { value: 'bottomCenter', title: 'bottomCenter' },
            { value: 'bottomRight', title: 'bottomRight' },
            { value: 'leftTop', title: 'leftTop' },
            { value: 'leftCenter', title: 'leftCenter' },
            { value: 'leftBottom', title: 'leftBottom' },
            { value: 'rightTop', title: 'rightTop' },
            { value: 'rightCenter', title: 'rightCenter' },
            { value: 'rightBottom', title: 'rightBottom' },
          ]}
        />
      </SplitSection>
    </Split>
  )
}

Offset

<Popover
  isOpen
  offset={2}
  placement="rightCenter"
  content={(
    <DemoBox padding="xsmall">
      Popover
    </DemoBox>
  )}
>
  <DemoBox padding="large">Trigger</DemoBox>
</Popover>

<Popover
  isOpen
  offset={2}
  placement="rightCenter"
  content={(
    <DemoBox padding="xsmall">
      Popover
    </DemoBox>
  )}
>
  <DemoBox padding="large">Trigger</DemoBox>
</Popover>

Open

Open on click

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}

Open on hover

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  return (
    <Container width="fit-content">
      <div
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
      >
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
        >
          Hover me
        </Popover>
      </div>
    </Container>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  return (
    <Container width="fit-content">
      <div
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
      >
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
        >
          Hover me
        </Popover>
      </div>
    </Container>
  )
}

Transition

Use transitionDuration and transitionDelay to animate the opening transition.

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
          transitionDuration={200}
          transitionDelay={70}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
          transitionDuration={200}
          transitionDelay={70}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}

Root id

Use rootId to insert the Popover in a custom container.

<div>
  <div id="popovers-root">Inspect me, the Popover will render here</div>
  <br />
  <Popover
    rootId="popovers-root"
    isOpen
    placement="rightCenter"
    content={(
      <DemoBox padding="xsmall">
        Popover
      </DemoBox>
    )}
  >
    <DemoBox padding="large">Trigger</DemoBox>
  </Popover>
</div>

<div>
  <div id="popovers-root">Inspect me, the Popover will render here</div>
  <br />
  <Popover
    rootId="popovers-root"
    isOpen
    placement="rightCenter"
    content={(
      <DemoBox padding="xsmall">
        Popover
      </DemoBox>
    )}
  >
    <DemoBox padding="large">Trigger</DemoBox>
  </Popover>
</div>

Boundary element

Use boundaryElement to limit Popover's horizontal overflow.

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const [boundaryElement, setBoundaryElement] = React.useState(false)
  const boundaryRef = React.useRef()
  React.useEffect(() => {
    setBoundaryElement(boundaryRef)
  }, [])
  return (
    <>
      <div ref={boundaryRef}
        style={{
          border: '1px solid var(--lns-color-border)',
          maxWidth: 400, height: 120
        }}
      >
        <Popover
          isOpen
          placement="bottomCenter"
          boundaryElement={boundaryRef.current}
          content={(
            <DemoBox padding="small" width="max-content">Popover with boundary</DemoBox>
          )}
        >
          <DemoBox padding="xsmall">Trigger</DemoBox>
        </Popover>
      </div>
      <div
        style={{
          border: '1px solid var(--lns-color-border)',
          maxWidth: 400, height: 120
        }}
      >
        <Container width='max-content'>
          <Popover
            isOpen
            placement="bottomCenter"
            content={(
              <DemoBox padding="small" width="max-content">Popover without boundary</DemoBox>
            )}
          >
            <DemoBox padding="xsmall">Trigger</DemoBox>
          </Popover>
        </Container>
      </div>
    </>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const [boundaryElement, setBoundaryElement] = React.useState(false)
  const boundaryRef = React.useRef()
  React.useEffect(() => {
    setBoundaryElement(boundaryRef)
  }, [])
  return (
    <>
      <div ref={boundaryRef}
        style={{
          border: '1px solid var(--lns-color-border)',
          maxWidth: 400, height: 120
        }}
      >
        <Popover
          isOpen
          placement="bottomCenter"
          boundaryElement={boundaryRef.current}
          content={(
            <DemoBox padding="small" width="max-content">Popover with boundary</DemoBox>
          )}
        >
          <DemoBox padding="xsmall">Trigger</DemoBox>
        </Popover>
      </div>
      <div
        style={{
          border: '1px solid var(--lns-color-border)',
          maxWidth: 400, height: 120
        }}
      >
        <Container width='max-content'>
          <Popover
            isOpen
            placement="bottomCenter"
            content={(
              <DemoBox padding="small" width="max-content">Popover without boundary</DemoBox>
            )}
          >
            <DemoBox padding="xsmall">Trigger</DemoBox>
          </Popover>
        </Container>
      </div>
    </>
  )
}

Examples

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(
            <Container
              contentColor="body"
              backgroundColor="overlay"
              borderSide="all"
              radius="medium"
              shadow="medium"
              padding="medium"
              width={38}
            >
              <Arrange gap="small" >
                {demoText.short}
                <Button onClick={() => setIsOpen(false)}>Close</Button>
              </Arrange>
            </Container>
          )}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(
            <Container
              contentColor="body"
              backgroundColor="overlay"
              borderSide="all"
              radius="medium"
              shadow="medium"
              padding="medium"
              width={38}
            >
              <Arrange gap="small" >
                {demoText.short}
                <Button onClick={() => setIsOpen(false)}>Close</Button>
              </Arrange>
            </Container>
          )}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}

Props

name

type

default

offset

number

0.5

boundaryOffset

number

0.5

zIndex

number | string

500

childrenZIndex

number

placement

'topCenter'

boundaryElement

'body' | Element

'body'

transitionDuration

number

transitionDelay

number

width

string

'fit-content'

children

React.ReactNode

content

React.ReactNode

isOpen

boolean

rootId

string

Guides

Styles

Components

Loaders

Layout

Icons

Illustrations

Patterns

Utilities

Playground

Popover (deprecated)

Deprecated

Usage

Placement

Offset

Open

Open on click

Open on hover

Transition

Root id

Boundary element

Examples

With popover card

Props