react-tooltip-z v2.2.0

Description

• It is wrap the tooltip for the element.

• Customize tooltip html/css/complex

• Append the tooltip outside the root. portal element.

Usage

Install the package

npm install react-tooltip-z

Import the module in the place you want to use:

import { Tooltip } from "react-tooltip-z";
// import { Tooltip, useTooltipContext } from "react-tooltip-z";

Snippet

simple

<Tooltip
    // tooltipContent={'This is simple tooltip'}
    tooltipContent={<b>This is jsx<br /> Tooltip</b>} // or Component
    tooltipClassName="my-class"
    placement="right"
    // trigger="click"
    // onClick={() => alert('event active')} // myClick()
>
    <button>this is children</button>
</Tooltip>

manual + api

// here is the sample, please update it exactly with your source

const [sync, setSync] = useState(false)
// fetch api // do something
fetchApi() {
    if (sync) {
        setSync(false)
        return
    }

    fetch('api').then(....).then(rs => {
        setTodo(todo)
        setSync(true)
    })
}

<Tooltip
    tooltipContent={<div>{todo.title}e<br />fds</div>}
    trigger="manual"
    placement='right'
    showSync={sync} // manual simple
>
    <button>Tooltip of todo</button>
</Tooltip>

<button onClick={fetchApi}>Fetch</button>

useTooltipContext + api

// don't use nested context
// here is the sample, please update it exactly with your source

import { Tooltip, useTooltipContext } from "react-tooltip-z";

// ListData.js
<ul>
    {
        post.map(item => {
            return (
                <Tooltip
                    tagName="li"  // wrap all child
                    trigger="manual"
                    placement="right"
                >
                    <ListDataItem {...} />
                </Tooltip>
            )
        })
    }
</ul>

// ListDataItem.js
// use TooltipContext to update tooltip
const { showTooltip, hideTooltip, isShow, tooltipId} = useTooltipContext()

// do something and show tooltip
fetchApi() {
    showTooltip('tooltip data after fetch.')
}

<div
    onClick={fetchApi}
    onMouseLeave={hideTooltip}
>
    This is list data item index.
</div>

Props (mains)

Note

`top` || `right` || `bottom` || `left` || `placement`: position the element

`...props` here are the props added to the child components. (You should add on child)

`showSync` or `useTooltipContext`: should be used when trigger = `manual`

• placement: if the position of the tooltip goes beyond the screen. It try will move to the right position to be visible.

Run

LIVE EXAMPLE

License

MIT