Popover

Ripple UI comes with Popover component in a floating container that can be used to display a information in a dissmissible way.

Is required to add tabIndex="0" to the popover-trigger and popover-content to have focusable element

​
Default

Simple example of a Popover.

And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Center bottom and top

Popover can be positioned to the center bottom and top.

And here's some amazing content. It's very engaging. Right?
And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-bottom-center" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>
<div class="popover">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-top-center" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Bottom left and right

Popover can be positioned to the bottom left and right.

And here's some amazing content. It's very engaging. Right?
And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-bottom-left" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>
<div class="popover">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-bottom-right" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Top left and right

Popover can be positioned to the top left and right.

And here's some amazing content. It's very engaging. Right?
And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-top-left" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>
<div class="popover">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-top-right" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Left and right

Popover can be positioned to the left and right.

And here's some amazing content. It's very engaging. Right?
And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover">
	<label class="popover-trigger mx-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-left" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>
<div class="popover">
	<label class="popover-trigger mx-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-right" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Left and right at top

Popover can be positioned to the left and right at top.

And here's some amazing content. It's very engaging. Right?
And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover">
	<label class="popover-trigger mx-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-left-top" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>
<div class="popover">
	<label class="popover-trigger mx-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-right-top" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Left and right at bottom

Popover can be positioned to the left and right at bottom.

And here's some amazing content. It's very engaging. Right?
And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover">
	<label class="popover-trigger mx-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-left-bottom" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>
<div class="popover">
	<label class="popover-trigger mx-2 btn" tabindex="0">Click</label>
	<div class="popover-content popover-right-bottom" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Bordered

Popover can be bordered.

And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover popover-border">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Hover

Popover can be triggered on hover.

And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover popover-hover">
	<label class="popover-trigger my-2 btn">Hover</label>
	<div class="popover-content">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Opened

Popover can be opened by default.

And here's some amazing content. It's very engaging. Right?
HTML
JSX
<div class="popover popover-open">
	<label class="popover-trigger my-2 btn">Hover</label>
	<div class="popover-content">
		<div class="popover-arrow"></div>
		<div class="p-4 text-sm">And here's some amazing content. It's very engaging. Right?</div>
	</div>
</div>

​
Responsive

Example of responsive popover.

Insights

Measure actions your users take

Automations

Create your own targeted content

Reports

Keep track of your growth

DocumentationStart integrating products and tools
HTML
JSX
<div class="popover">
	<label class="popover-trigger my-2 btn" tabindex="0">Click</label>
	<div class="popover-content w-screen max-w-sm" tabindex="0">
		<div class="popover-arrow"></div>
		<div class="overflow-hidden rounded-lg">
			<div class="relative grid gap-8 p-7 lg:grid-cols-1">
				<a href="##" class="-m-3 flex items-center rounded-lg p-2 ease-in-out hover:bg-gray-5 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50">
					<div class="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
						<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect width="48" height="48" rx="8" fill="#FFEDD5"></rect>
							<path d="M24 11L35.2583 17.5V30.5L24 37L12.7417 30.5V17.5L24 11Z" stroke="#FB923C" stroke-width="2"></path>
							<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z" stroke="#FDBA74" stroke-width="2"></path>
							<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z" stroke="#FDBA74" stroke-width="2"></path>
						</svg>
					</div>
					<div class="ml-4">
						<p class="text-sm font-medium text-content1">Insights</p>
						<p class="text-sm text-content2">Measure actions your users take</p>
					</div>
				</a>
				<a href="#" class="-m-3 flex items-center rounded-lg p-2 ease-in-out hover:bg-gray-5 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50">
					<div class="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
						<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect width="48" height="48" rx="8" fill="#FFEDD5"></rect>
							<path d="M28.0413 20L23.9998 13L19.9585 20M32.0828 27.0001L36.1242 34H28.0415M19.9585 34H11.8755L15.9171 27" stroke="#FB923C" stroke-width="2"></path>
							<path fill-rule="evenodd" clip-rule="evenodd" d="M18.804 30H29.1963L24.0001 21L18.804 30Z" stroke="#FDBA74" stroke-width="2"></path>
						</svg>
					</div>
					<div class="ml-4">
						<p class="text-sm font-medium text-content1">Automations</p>
						<p class="text-sm text-content2">Create your own targeted content</p>
					</div>
				</a>
				<a href="##" class="-m-3 flex items-center rounded-lg p-2 ease-in-out hover:bg-gray-5 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50">
					<div class="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
						<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect width="48" height="48" rx="8" fill="#FFEDD5"></rect>
							<rect x="13" y="32" width="2" height="4" fill="#FDBA74"></rect>
							<rect x="17" y="28" width="2" height="8" fill="#FDBA74"></rect>
							<rect x="21" y="24" width="2" height="12" fill="#FDBA74"></rect>
							<rect x="25" y="20" width="2" height="16" fill="#FDBA74"></rect>
							<rect x="29" y="16" width="2" height="20" fill="#FB923C"></rect>
							<rect x="33" y="12" width="2" height="24" fill="#FB923C"></rect>
						</svg>
					</div>
					<div class="ml-4">
						<p class="text-sm font-medium text-content1">Reports</p>
						<p class="text-sm text-content2">Keep track of your growth</p>
					</div>
				</a>
			</div>
			<div class="bg-gray-2 p-4">
				<a href="##" class="flow-root rounded-md px-2 py-2 ease-in-out hover:bg-gray-4 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50">
					<span class="flex items-center">
						<span class="text-sm font-medium text-content1">Documentation</span>
					</span>
					<span class="block text-sm text-content2">Start integrating products and tools</span>
				</a>
			</div>
		</div>
	</div>
</div>

​
API

classNameDescription
popoverThe popover container
popover-triggerTrigger to open the popover
popover-contentContainer of all the content
popover-arrowClass to show arrow
popover-openThe popover will be opened by default
popover-hoverThe popover will be opened on hover
popover-borderThe popover-content and arrow will have a border
popover-bottom-centerThe popover will be positioned at the bottom center
popover-bottom-leftThe popover will be positioned at the bottom left
popover-bottom-rightThe popover will be positioned at the bottom right
popover-top-centerThe popover will be positioned at the top center
popover-top-leftThe popover will be positioned at the top left
popover-top-rightThe popover will be positioned at the top right
popover-leftThe popover will be positioned at the left center
popover-left-topThe popover will be positioned at the left top
popover-left-bottomThe popover will be positioned at the left bottom
popover-rightThe popover will be positioned at the right center
popover-right-topThe popover will be positioned at the right top
popover-right-bottomThe popover will be positioned at the right bottom
PaginationProgress
Edit this page on GitHub