Popover

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

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
 
 
 

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
 
 
 
 
 

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
 
 

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
 

API

Popover API <i-popover>
Property Description Type Accepted Default
arrow Sets whether to attach an arrow to the popover. Boolean true, false true
disabled Sets the popover state as disabled. Boolean true, false false
id Sets the identifier of the popover. String popover-<uid>
placement Sets the placement of the popover. String top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end top
popperOptions Sets custom options for the Popper.js plugin. Object
trigger Sets the trigger event of the popover. String click, hover click
transformOrigin Sets the transform origin of the popover. Boolean, String true
variant Sets the color variant of the popover. String light, dark light