react-tooltip-z

react-tooltip-z

LIVE EXAMPLE

---

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`

• 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