Popover

A sl-popover component is an element that displays a view that relates to another element.

It's often used as a way to display action menus for buttons.

Hello There!

Close

<sl-button>
  <sl-icon name="kebab-horizontal"/>
</sl-button>
<sl-popover>
  <div>Hello There!</div>
  <sl-button primary>Close</sl-button>
</sl-popover>

Attributes

Target

Modifies the popover target. Popover will open itself when clicking on this element, and will position itself relatively.

Target defaults to previous sibling.

I'm a cool text, and this element as a popover!That'w awesome

<span>I'm a cool text, and <sl-keyboard ref="target">this element</sl-keyboard> as a popover!</span>
<sl-popover :target="target">
  <span>That'w awesome</span>
</sl-popover>

Position

Modifies the popover position relative to target.

Position defaults to bottom.

TopI'm on top!RightI'm on the right!BottomI'm at bottom!LeftI'm on the left!

<!-- Top -->
<sl-button>Top</sl-button>
<sl-popover position="top">I'm on top!</sl-popover>
<!-- Right -->
<sl-button>Right</sl-button>
<sl-popover position="right">I'm on the right!</sl-popover>
<!-- Bottom -->
<sl-button>Bottom</sl-button>
<sl-popover position="bottom">I'm at bottom!</sl-popover>
<!-- Left -->
<sl-button>Left</sl-button>
<sl-popover position="left">I'm on the left!</sl-popover>

Alignment

Modifies the popover alignment relative to target.

Alignment defaults to start.

StartI'm at start!CenterI'm centered!EndI'm at the end!JustifyI'm justified!

<!-- Start -->
<sl-button>Start</sl-button>
<sl-popover align="start">I'm at start!</sl-popover>
<!-- Center -->
<sl-button>Center</sl-button>
<sl-popover align="center">I'm centered!</sl-popover>
<!-- End -->
<sl-button>End</sl-button>
<sl-popover align="end">I'm at the end!</sl-popover>
<!-- Justify -->
<sl-button>Justify</sl-button>
<sl-popover align="justify">I'm justified!</sl-popover>