ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Popover

yarn add @clayui/popover

Popovers contain helpful information such as an explanation of a context.

  • Examples
  • Markup
  • API

Stable3.5.3View in LexiconCHANGELOGstorybook demos

  • Position

    • Top
    • Right
    • Bottom
    • Left

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.
Copied!
Code Sample (expand to see it)
<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.
Copied!
Code Sample (expand to see it)
<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.
Copied!
Code Sample (expand to see it)
<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.
Copied!
Code Sample (expand to see it)
<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>

How can this be improved? Create an issue!