Nana Plays Minesweeper

    just-react-tooltip
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.9 • Public • Published

    just-react-tooltip

    Simple, lightweight react tooltip component without any dependencies.

    Tooltip renders in body to avoid overflow issues, it can be used everywhere(react-modal, etc.).

    Installation

    npm install just-react-tooltip

    or

    yarn add just-react-tooltip

    Usage

    1 . Import just-react-tooltip after installation

    import { Tooltip } from 'just-react-tooltip'

    2 . Wrap your element by Tooltip component

    <Tooltip content={<h3>Tooltip content</h3>}>
      <p>Hover to show tooltip</p>
    </Tooltip>

    Important

    Tooltip doesn't add any styles to your passed content. Because usually developers wanted to customize it, so you should just pass to content property your already styled component.

    Props

    Notes:

    • The tooltip sets place: bottom, align: center, offsetFromTarget: 10, offsetX: 0, offsetY: 0, offsetFromEdge: 8, showDelay: 0, hideDelay: 0 as default attributes. You don't have to add these options if you don't want to change the defaults
    Property Type Values and default Description
    content (required) ReactNode Single JSX component Your styled tooltip
    place String "top", "right", "bottom", "left" Place to show tooltip relative to wrapped component.
    align String "start", "center", "end" Alignment in selected side of wrapped element (placement)
    offsetFromTarget Number 10 Offset from target for top,right,bottom,left places. No need to add negative.
    offsetY Number 0 Vertical offset
    offsetX Number 0 Horizontal offset
    offsetFromEdge Number 8 Offset from screen edge when tooltip is stickied
    showDelay Number 0 Delay to show tooltip
    hideDelay Number 0 Delay to hide tooltip
    portalId String undefined If you don't like that component manipulate with the DOM directly, you can pass ID of div added especially for rendering tooltips.

    Troubleshooting

    Custom child element

    The tooltip needs to apply DOM event listeners to its child element. If the child is a custom React element, you need to make sure that it spreads its props to the underlying DOM element.

    const MyComponent = React.forwardRef(function MyComponent(props, ref) {
      //  Spread the props to the underlying DOM element.
      return <div {...props} ref={ref}>Bin</div>
    });
    
    // ...
    
    <Tooltip content={<h3>Delete</h3>}>
      <MyComponent />
    </Tooltip>

    Contributing

    We welcome your contribution! Fork the repo, make some changes, submit a pull-request!

    License

    MIT

    Install

    npm i just-react-tooltip

    DownloadsWeekly Downloads

    9

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    20.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • li4e