Home Components Popover
Popover
Overview Playground API
The Popover component is used to display additional information.
Usage
Submit



  <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.
Submit



  <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.
Submit



  <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>


Usage Placements Tip
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next