Popovers are useful for conveying information when an user clicks or hovers an element.
Example
Wrap both the popover's trigger element (such as an <i-button>) and the <template slot="body"> inside a <i-popover> component. Optionally, you can provide a popover header and footer using slot="header" and slot="footer".
Popover Example
Popover Header
This is the popover body. Useful information goes here.
<i-popover><i-button>Popover</i-button><templateslot="header">Popover Header</template><templateslot="body">This is the popover body. Useful information goes here.</template><templateslot="footer">Popover Footer</template></i-popover>
Placement
Trigger popovers at the top, bottom, left or right of elements by adding the placement property to the <i-popover> element.
Each of the positions also has a -start or -end variant (top-start, top-end, bottom-start, bottom-end, etc.) that sets the popover to the start or end of the placement instead of centering it.
Popover Placement
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
<i-popoverplacement="top"><i-button>Top Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover><i-popoverplacement="bottom"><i-button>Bottom Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
<i-popoverplacement="left"><i-button>Left Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
<i-popoverplacement="right"><i-button>Right Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
Trigger type
You can use the trigger property to trigger the popover on hover or click. By default, popovers are triggered on click, a design decision made to improve user experience.
Popover Trigger Type
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
<i-popovertrigger="click"><i-button>Click Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
<i-popovertrigger="hover"><i-button>Hover Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
<i-popovertrigger="focus"><i-button>Focus Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
<i-popover:trigger="['focus', 'hover']"><i-button>Multiple Events Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
<i-popovertrigger="manual"v-model="visible"><i-button@click="visible = !visible">Manual Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
Sizes
You're able to use the size modifier to control the size of your popovers, using one of the available sizes: sm, md, and lg.
The default size is set to md.
Popover Sizes
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
This is the popover body. Useful information goes here.
<i-popoversize="sm"><i-button>Small Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
<i-popoversize="md"><i-button>Medium Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
<i-popoversize="lg"><i-button>Large Popover</i-button><templateslot="body">This is the popover body. Useful information goes here.</template></i-popover>
Variants
Inkline includes two predefined popover styles, each serving its own semantic purpose. You can set the style of a <i-popover> using the variant property, which can have a value of light or dark. By default, popovers use the light variant.
Popover Variants
Popover Header
This is the popover body. Useful information goes here.
Popover Header
This is the popover body. Useful information goes here.
<i-popovervariant="light"><i-buttonvariant="light">Light Popover</i-button><templateslot="header">Popover Header</template><templateslot="body">This is the popover body. Useful information goes here.</template><templateslot="footer">Popover Footer</template></i-popover>
<i-popovervariant="dark"><i-buttonvariant="dark">Dark Popover</i-button><templateslot="header">Popover Header</template><templateslot="body">This is the popover body. Useful information goes here.</template><templateslot="footer">Popover Footer</template></i-popover>
Component API
Here you can find a list of the various customization options you can use for the popover component as props, as well as available slots and events.
Popover API
Property arrow
TypeBoolean
Acceptedtrue, false
Defaulttrue
Description Sets whether to attach an arrow to the popover.
Description Sets custom options for the Popper.js plugin.
Property trigger
TypeString
Acceptedclick, hover
Defaultclick
Description Sets the trigger event of the popover.
Property transformOrigin
TypeBoolean,
String
Defaulttrue
Description Sets the transform origin of the popover.
Property variant
TypeString
Acceptedlight, dark
Defaultlight
Description Sets the color variant of the popover.
Slot default
Description Slot for popover component trigger.
Slot header
Description Slot for popover component header.
Slot body
Description Slot for popover component body.
Slot footer
Description Slot for popover component footer.
Event change
Type(visible: Boolean) => {}
Description Emitted when visibility changes.
Sass Variables
Here you can find a list of the Sass variables you can use for the popover components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.
Inkline