Overview
Theme
Installation
Components
Accordion
Alert
Avatar
Badge
Breadcrumbs
Button
Checkbox
Checkbox Card
Checkbox Group
Copy to clipboard button
Dialog
Drawer
Dropdown Menu
Fullscreen Dialog
Icon Button
Icon with background
Link Button
Loader
Navbar
Progress
Radio Card Group
Radio Group
Select
Sidebar
Skeleton Circle
Skeleton Text
Slider
Stepper
Switch
Table
Tabs
Text Area
Text Field
Toast
Toggle Group
Tooltip
Vertical Stepper

Tooltip

Displays a message when the user hovers over an element.
Tooltip
Properties
children
Example
Source Code
Installation
"use client";

import React from "react";
import { Tooltip } from "@/subframe/components/Tooltip";

function TooltipExample() {
  return <Tooltip>Tooltip</Tooltip>;
}

export default TooltipExample;

Props

Tooltip
Prop
Type
Default
Additional info
children
string
"Tooltip"

Examples

Basics

Wrap your content with SubframeCore.Tooltip to show the tooltip. It has the same API as Radix UI's Tooltip component.

Offset

Use offset to change the distance between the trigger and the tooltip.

Positioning

Use side and align props to change the position of the tooltip.

Helper component

You can simplify your tooltip usage by creating your own helper component like TooltipHost below.