Documentation
Documentation Hub

Help left

Popovers can have different alignments and can be used to display help messages. Use the orientation prop to change the popover's alignment.

Show code
vue

Help right

Popovers can have different alignments and can be used to display help messages. Use the orientation prop to change the popover's alignment.

Show code
vue

#<TairoPopover>

•Properties

fixed
Used a fixed strategy to float the component
Show example
vue
orientation
The orientation of the popover.

@deprecated

use placement instead

Show example
vue
placement
The placement of the dropdown via floating-ui.
Show example
vue
rounded
The radius of the popover.
Show example
vue
size
The size of the popover.
Show example
vue

•Slots

#default
This slot has no inherted props
Show example
vue
#content
This slot has no inherted props
Show example
vue

#<TairoPopoverContentHelp>

•Properties

icon
The name of the icon to display.
Required
Show example
vue
subtitle
The subtitle of the help popover.
Required
Show example
vue
text
The text of the help popover.
Required
Show example
vue
title
The title of the help popover.
Required
Show example
vue
icon-color
The color of the icon.
Show example
vue

Dual left

Popovers can have different alignments and can be used to display help messages. Use the orientation prop to change the popover's alignment.

Show code
vue

Dual right

Popovers can have different alignments and can be used to display help messages. Use the orientation prop to change the popover's alignment.

Show code
vue

#<TairoPopoverContentDual>

•Properties

stats
An array of stats to display.
Required
Show example
vue
footer-text
The text of the footer.
Show example
vue
footer-title
The title of the footer.
Show example
vue
image
The URL of the main image to display.
Show example
vue
link-label
The label for the link.
Show example
vue
subtitle
The main subtitle to display.
Show example
vue
title
The main title to display.
Show example
vue
to
The URL for the link.
Show example
vue

Media left

Popovers can have different alignments and can be used to display help messages. Use the orientation prop to change the popover's alignment.

Show code
vue

Media right

Popovers can have different alignments and can be used to display help messages. Use the orientation prop to change the popover's alignment.

Show code
vue

#<TairoPopoverContentMedia>

•Properties

images
An array of image URLs to display.
Required
Show example
vue
link-label
The label for the link.
Required
Show example
vue
title
The main title to display.
Required
Show example
vue
to
The URL for the link.
Required
Show example
vue
footer-text
The text of the footer.
Show example
vue
footer-title
The title of the footer.
Show example
vue
subtitle
The main subtitle to display.
Show example
vue
text
The main text to display.
Show example
vue