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

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

#<TairoPopover>

PropertiesΒΆ

rounded
The radius of the popover.
Show example
size
The size of the popover.
Show example
fixed
Used a fixed strategy to float the component
Show example
orientation
The orientation of the popover.

@deprecated

use placement instead

Show example
placement
The placement of the dropdown via floating-ui.
Show example

SlotsΒΆ

#default
Show example
#content
Show example

#<TairoPopoverContentHelp>

PropertiesΒΆ

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

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

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

#<TairoPopoverContentDual>

PropertiesΒΆ

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

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

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

#<TairoPopoverContentMedia>

PropertiesΒΆ

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