Skip to main content
⌘K
Last modified: 24/Jun/2024

Popover

A Popover can be used to display some content on top of another.

#Usage

import { Popover, Button } from '@kinsta/stratus'

const MyComponent = () => (
  <Popover
    title="You are in command now"
    content={<>Popover content</>}
  >
    <Button>Click here</Button>
  </Popover>
)

Controlled version:

import { useState } from 'react'
import { Popover, Button } from '@kinsta/stratus'

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
      <Popover
        onVisibilityChange={setIsOpen}
        isOpen={isOpen}
        content={<div>Popover content</div>}
      >
        <Button>Popover Button</Button>
      </Popover>
  )
}

#Popover Hider

You can use the Popover.Hider subcomponent to hide the Popover. You can pass one children element, and it will close the layer.

import { Popover, Link } from '@kinsta/stratus'

const myPopoverContent = (
  <div>
    Only passengers myself, the boy, two droids, and no questions asked.
    <Popover.Hider>
      <Link href="#">What is it, some kind of local trouble?</Link>
    </Popover.Hider>
  </div>
)

#Props

#title
ReactNode
Title of the Popover. You can place anything in contents, this is a shorthand for styling the title.
#isDisabled
boolean
Controls whether the popover is enabled.
#width
number | "available" | "auto"
Sets the width of the Popover. If available set, the Popover will use all the available space. If auto is set, the floating element will adjust to the width of the content.
#hasPadding
boolean
Determines whether the Popover's content has padding.
true
#trigger
Trigger | Trigger[]
Where Trigger could be focus, hover, or click. Sets the event that should open the Popover.
click
#isOpen
boolean
If true, Popover is open. Use this prop for the controlled version.
#onVisibilityChange
(isOpen: boolean) => void
Use this together with isOpen for the controlled version to handle visibility change.
#ref
ForwardedRef<HTMLDivElement>
This is passed to the ref of the content's container
#initialFocus
number | MutableRefObject<HTMLElement>
Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.
0
#order
Element[]
The order in which focus cycles.
['floating', 'content']
#children
Required
ReactNode
Reference element which triggers the element open
#content
Required
ReactNode
Contents of the element
#placement
Placement
Decides the placement of the element
left
#delay
number

#Types

  • PopoverProps: props of the Popover component extended by TooltipProps
  • PopoverHiderProps: props of the Popover.Hider component processed by stratus

Read more about types here

#See Also