Callout

<fv-callout v-model="show" effect="hover" position="bottomLeft">
  <fv-button icon="ActionCenter" borderRadius="3" style="width: 120px; height: 45px;">Callout</fv-button>
  <template v-slot:main>
    <fv-color-picker v-model="color" style="width:500px"></fv-color-picker>
  </template>
</fv-callout>

Callout Custom

beak:

10 px

space:

0 px

position:

topLeft

<fv-callout :lockScroll="true" :position="position.key" :beak="beak" :space="space" :calloutBg="color" :borderRadius="12" theme="dark">
  <fv-button :background="color" theme="dark" icon="ActionCenter" borderRadius="3" style="width: 120px; height: 45px;">Callout</fv-button>
  <template v-slot:header>
    Fluent UI
  </template>
  <template v-slot:main>
    Hello Vue! Nice to meet you!
  </template>
  <template v-slot:footer>
    @Copyright Creator SN
  </template>
</fv-callout>

Properties

---

Property	Type	Required	Default	Description
v-model	Boolean	No	false	Whether the component is visible.
theme	string	No	'global'	Theme color.
disabled	boolean	No	false	Whether the component is disabled.
space	number	No	0	Spacing in pixels between target and callout.
beak	number	No	0	Beak size in pixels. Does not affect distance.
position	string	No	'bottomCenter'	Position.
lockScroll	boolean	No	true	Whether page scrolling is locked.
focusTrap	boolean	No	false	Whether focus trapping is enabled.
delayClose	number	No	0	See the Callout delayClose option.
effect	string	No	'click'	Display trigger mode.
popperStyle	object	No	{}	Floating panel style.
popperClass	array	No	[]	Floating panel CSS classes.
calloutBg	string	No	''	Background color for .fv-callout-bg.
borderRadius	number/string	No	5	Border radius of the callout panel.
keepalive	boolean	No	false	See the Callout keepalive option.
lang	string	No	"global"	See the Callout lang option.

Appendix

---

1. position