Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

@react.component
let make = () =>
  <Tooltip>

Installation

Run the following command:


npx shadcn@latest add @rescript-shadcn/Tooltip

Add the `Tooltip.Provider` to the root of your app.

app/layout.res

module RootLayout = {
  @react.component
  let make = (~children) =>
    <html lang="en">
      <body>
        <Tooltip.Provider>{children}</Tooltip.Provider>
      </body>
    </html>
}

Usage

<Tooltip>
  <Tooltip.Trigger render={<Button variant=Outline />}>
    {"Hover"->React.string}
  </Tooltip.Trigger>
  <Tooltip.Content>
    <p> {"Add to library"->React.string} </p>
  </Tooltip.Content>
</Tooltip>

Examples

Side

Use the side prop to change the position of the tooltip.

let tooltipSides = [
  BaseUi.Types.Side.Left,
  BaseUi.Types.Side.Top,

With Keyboard Shortcut

module LucideIcons = {
  type props = {className?: string, @as("data-icon") dataIcon?: string}

Disabled Button

Show a tooltip on a disabled button by wrapping it with a span.

@react.component
let make = () =>
  <Tooltip>

API Reference

See the Base UI Tooltip documentation.