Popover
yarn add @clayui/popover
Popovers contain helpful information such as an explanation of a context.
Stable3.4.7View in LexiconCHANGELOG
Popover Header!
Single shot, café au lait aromatic body robusta body cream mocha viennese steamed aged. Irish roast, aromatic seasonal, caramelization grinder french press coffee cortado lungo skinny.
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Code Sample (expand to see it)
API
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
alignPosition | typeof ALIGN_POSITIONS[number] | false | 'bottom' | Position in which the tooltip will be aligned to the element. |
disableScroll | boolean | false | false | Flag to indicate if container should not be scrollable |
show | boolean | false | false | Flag to indicate if tooltip is displayed. |
onShowChange | (val: boolean) => void | false | Callback for when the `show` prop changes. | |
trigger | React.ReactElement & { ref?: (node: HTMLButtonElement | null) => void; } | false | React element that the popover will align to when clicked. | |
header | React.ReactNode | false | Content to display in the header of the popover. |
Position
Top
Popover top
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Popover top left
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Popover top right
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
<div class="clay-popover-top fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover top</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>
<div class="clay-popover-top-left fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover top left</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>
<div class="clay-popover-top-right fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover top right</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>Right
Popover right
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Popover right top
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Popover right bottom
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
<div class="clay-popover-right fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover right</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>
<div class="clay-popover-right-top fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover right top</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>
<div class="clay-popover-right-bottom fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover right bottom</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>Bottom
Popover right bottom
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Popover right bottom left
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Popover right bottom right
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
<div class="clay-popover-bottom fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover right bottom</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>
<div class="clay-popover-bottom-left fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover right bottom left</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>
<div class="clay-popover-bottom-right fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover right bottom right</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>Left
Popover left
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Popover left top
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
Popover left bottom
Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.
<div class="clay-popover-left fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover left</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>
<div class="clay-popover-left-top fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover left top</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>
<div class="clay-popover-left-bottom fade popover show">
<div class="arrow"></div>
<div class="inline-scroller">
<div class="popover-header">Popover left bottom</div>
<div class="popover-body">
Viennese flavour cup eu, percolator froth ristretto mazagran
caffeine. White roast seasonal, mocha trifecta, dripper caffeine
spoon acerbic to go macchiato strong.
</div>
</div>
</div>