React-tooltip-z NPM

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 --save 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>

simple: `trigger=manual` (with 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>

More complex (with api + useTooltipContext)

// 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)

props	type	description
tagName	String	If you wrap all children component, use this
tooltipClassName	String
tooltipContent	`String`/`Component`/ `jsx`	Tooltip data
placement	`top`/`right`/`left`/`bottom`	it relies on the element's height, width and position to display.
trigger	`hover`/`click`/`manual`	Default `hover`
backgroundColor	String	Default `#282727`
tooltipColor	String	Default `#ffffff`
delayShow	Number (`250`) minisecond	Time delay show tooltip
display	`fade`/`zoom`	Animate tooltip
limitWidth	Boolean	Fix `max-width: 200px`. Default: `true`.
onShown	function	Event after show
onHidden	function	Event after hide
showSync	Boolean	Simple trigger = manual
open	Boolean	Show tooltip
hideIfResize	Boolean	hide tooltip if resize screen (Default `true`)
hideIfScroll	Boolean	hide tooltip if scroll screen (Default `false`)
centerArrow	Boolean	Show arrow and tooltip on center element (Default false)
forceHide	any	when change forceHide, tooltip will be forced hidden (Default null)
`...props`	other	Other props of child elements

top || right || bottom || left || placement

Note

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

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