The Popover component is used to display additional information.
Usage
<goat-popover id="popover" trigger="hover" open>
<goat-icon name="settings" style="cursor: pointer"></goat-icon>
<goat-popover-content>
<goat-input label="Name" layer="01"></goat-input>
<goat-input label="Email" layer="01"></goat-input>
<goat-button>Submit</goat-button>
</goat-popover-content>
<div slot="start"></div>
</goat-popover>
Placements
The popover can be positioned relative to the trigger element. Possible positions are:
top
,
right
,
left
,
bottom
.
Also you can use the following modifiers: start and end to align the popover.
You can also use the positions
attribute to set all preferred position of the
dropdown. On scroll, the dropdown will be repositioned to the
closest position.
<goat-popover trigger="manual" open placements="top-start,bottom-end">
<goat-icon name="settings" style="cursor: pointer"></goat-icon>
<goat-popover-content>
<goat-input label="Name" layer="01"></goat-input>
<goat-input label="Email" layer="01"></goat-input>
<goat-button>Submit</goat-button>
</goat-popover-content>
<div slot="start"></div>
</goat-popover>
Tip
Popover support different types of tips. You can use the tip attribute to set the tip type.
The possible values are: tab, caret, none.
<goat-popover id="popover" trigger="click" tip="tab" open>
<goat-icon name="settings" style="cursor: pointer"></goat-icon>
<goat-popover-content>
<goat-input label="Name" layer="01"></goat-input>
<goat-input label="Email" layer="01"></goat-input>
<goat-button>Submit</goat-button>
</goat-popover-content>
<div slot="start"></div>
</goat-popover>