Fusion UI

Overview

A Tooltip shows a short text while the pointer rests on the wrapped element or it has the keyboard focus. It is positioned next to the element, in an optional direction.

"use client";

import React from "react";
import {Button, Tooltip} from "@brynlabs/fusion-ui";

export const TooltipExample = () => (
  <Tooltip tooltip={"Tooltip"}>
    <Button>Hover me!</Button>
  </Tooltip>
);

Directions

"use client";

import React from "react";
import {Button, Tooltip, TOOLTIP_DIRECTION} from "@brynlabs/fusion-ui";

export const TooltipDirectionsExample = () => (
  <div
    style={{
      display: "flex",
      alignItems: "center",
      textAlign: "center",
      gap: "20px",
      whiteSpace: "nowrap",
      flexWrap: "wrap",
    }}>
    {TOOLTIP_DIRECTION.map(direction => (
      <div key={direction}>
        <Tooltip key={direction} placement={direction} tooltip={`Tooltip ${direction}`}>
          <Button>{direction}</Button>
        </Tooltip>
      </div>
    ))}
  </div>
);