Popover

Visualization & Interaction

Display Content that floats around a trigger

Keyboard support
Screen Reader capable
Smart Floating Content
Custom Content

Quickstart #

<script>
	import { Popover, Button } from '@steeze-ui/components'
</script>

<Popover>
  <Button slot="trigger">open</Button>
  <div slot="content">
    content
  </div>
</Popover>

API Reference #

Property	Type	Default
`opened`	`Boolean`	`false`
`position`	`FloatingPosition`	`"bottom"`
`showClose`	`Boolean`	`"false"`
`*`	`*`	`-`

Styling #

Name	Default
`--st-popover-padding`	`1rem`
`--st-popover-box-shadow`	`--st-overlay-box-shadow`
`--st-popover-bg-color`	`--st-overlay-bg-color`
`--st-popover-border-radius`	`--st-overlay-border-radius`
`--st-popover-border-width`	`--st-overlay-border-width`
`--st-popover-border-color`	`--st-overlay-border-color`