Popover
Wrap the trigger element (such as an <IButton>) and provide a <template #body> inside an <IPopover> component to create a popover.
Optionally, you can provide a popover header and footer using slots.
<template>
<IPopover>
<IButton>Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
</template>
Trigger popovers at the top, bottom, left or right of elements by using the placement property.
Each position also has a -start or -end variant that sets the popover to the start or end of the placement instead of centering it. The possible placements are:
toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
<template>
<IPopover placement="top">
<IButton>Top Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover placement="bottom">
<IButton>Bottom Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover placement="left">
<IButton>Left Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover placement="right">
<IButton>Right Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
</template>
You can use the trigger property to trigger the popover on hover or click. By default, popovers are triggered on hover, a design decision made to improve user experience.
<script>
export default {
data() {
return {
visible: false
};
}
};
</script>
<template>
<IPopover events="click">
<IButton>Click Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover events="hover">
<IButton>Hover Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover events="focus">
<IButton type="submit">Focus Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover :events="['focus', 'hover']">
<IButton>Multiple Events Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover v-model:visible="visible" events="manual">
<IButton @click="visible = !visible">Manual Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
</template>
You can choose a light or dark color for your popover using the color modifier.
<template>
<IPopover color="light">
<IButton color="light">Light Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover color="dark">
<IButton color="dark">Dark Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
</template>
You're able to use the size property to control the size of your popovers, using one of the available sizes: sm, md, and lg.
The default size is set to md.
<template>
<IPopover size="sm">
<IButton>Small Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover size="md">
<IButton>Medium Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
<IPopover size="lg">
<IButton>Large Popover</IButton>
<template #header> Popover Header </template>
<template #body> This is the popover body. Useful information goes here. </template>
<template #footer> Popover Footer </template>
</IPopover>
</template>