Fusion UI

Overview

A Popover is a small floating surface anchored to its trigger, for contextual information or interaction. It opens on click, on hover or follows the pointer; a default placement controls the direction.

Hover me!

Hover over this area

"use client";

import {Button, Popover, TileContent, TileFooter, TileHeader} from "@brynlabs/fusion-ui";
import React from "react";

export const PopoverExample = () => (
  <div style={{display: "flex", flexWrap: "wrap", gap: "30px", alignItems: "center"}}>
    <Popover
      mode="click"
      placement={"top"}
      content={
        <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
          <TileHeader>Popover Title</TileHeader>
          <TileContent>Popover Content</TileContent>
          <TileFooter>
            <Button color="neutral">Footer Button</Button>
          </TileFooter>
        </div>
      }>
      <Button color="primary">Click me!</Button>
    </Popover>

    <Popover mode="hover" placement={"bottom"} content={<p>Nice hover!</p>}>
      <span>Hover me!</span>
    </Popover>

    <Popover mode="pointer" content={<div>I'm following you and not leaving your side!</div>}>
      <div
        style={{
          width: 200,
          height: 100,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          border: "1px dashed grey",
        }}>
        Hover over this area
      </div>
    </Popover>
  </div>
);