Popover

Extra content revealed on hover or focus within.

Showcase
To reveal extra content!
Source
<script>
  import { PopoverPositions } from 'attractions/popover';
</script>

<Popover position={PopoverPositions.BOTTOM}>
  <Button>hover or focus me</Button>
  <div slot="popover-content">
    To reveal extra content!
  </div>
</Popover>

Properties #

Style Properties

Name
Default
Type
Description
position PopoverPositions.TOP PopoverPositions The position of the popover content relative to the triggering handle.

Class Properties

All <Popover> components use the .popover-container class for the main element and .popover for the popover itself.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the component.
popoverClass null string A class string to add to the popover.

Slots #

Default slot

The handle – any content that will, on hover or focus, show a popover next to it.

popover-content slot

The content of the popover.

The following objects are available as named exports in 'attractions/popover'.

PopoverPositions #

An enum describing possible positions for the Popover.

Field
Description
TOP Above the handle, centered with respect to it.
BOTTOM Below the handle, centered with respect to it.
LEFT To the left of the handle, centered with respect to it.
RIGHT To the right of the handle, centered with respect to it.