Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Installation
Run the following command:
Add the Tooltip.Provider to the root of your app.
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.
With Keyboard Shortcut
Disabled Button
Show a tooltip on a disabled button by wrapping it with a span.
API Reference
See the Base UI Tooltip documentation.