Tooltip

Interface of Tooltip
🏗 Coming Soon

A simple Tooltip component with out of the box styles and behavior.

Tooltip Placement

Tooltip allows you to specify where it should appear in relation to the target element. It accepts the following values:

  • auto
  • auto-end
  • top-start
  • top
  • top-end
  • right-start
  • right
  • right-end
  • bottom-end
  • bottom
  • bottom-start
  • left-end
  • left
  • left-start

"Render Prop" style

Sometimes you may need to control how Tooltip applies handlers to the component within it. If so you can use the render prop form of the component:

If you need to be very specific

Tooltip passes a "hover" class

In both the regular and "Render Prop" styles, Tooltip will pass a class named hover to its child element (or function) when the Tooltip is open.

This will preserve any hover styling when the cursor is on the tooltip text and off of the trigger element itself.