react-portal-hint v0.5.2

react-portal-hint

This library is in the alpha phase. Many things are subject to change.

The intuitive, efficient, configurable Tooltip/Popover which exploits React Portals. Parallel fading is enabled.
Demo

TODO

• Implement default style
• Implement port for user-defined style
• Support place options (top, button, left, right)
• Make portal root element configurable
• Follow target or hint content size or position (Use ResizeObserver)
• Support more events
• Support more place options (combinations)
• Implement transform observation (Use setInterval)
• Resolve margin problem
• Resolve CSS Flexbox & Grid problem
• Examples (Flexbox, CSS grid)
• Enable ts strict options
• Do TODO in code
• Accepts forwardRef
• Accepts multiple children
• content validation
• Example with custom stylesheet
• Accepts Refs as props (exotic)
• Configure test summary for CI
• Well-documented documents
• Improve performance
• Multi-browser support

How to use

Use this as tooltip with default style

import Hint from "react-portal-hint";
import "react-portal-hint/default.css";

<Hint content="Hello!">
  <button>Something happens...</button>
</Hint>;

Props

type ActualPlace = "top" | "bottom" | "left" | "right";
type Place = ActualPlace | "column" | "row" | "start" | "end";
declare place: Place | ActualPlace[]; // TODO: explanation

TODO...

License

MIT