Skip to content

delpikye-v/react-tooltip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

React. Wrap the tooltip for the element. (create npm lib)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published