Miss any of our Open RFC calls?Watch the recordings here! »

@timcchang/react-tooltip

0.0.6-1 • Public • Published

React Tooltip

A tiny, customizable and extensible React tooltip component. ⚡️

npm version Formatted with Prettier TypeScript

Background

You want to build a tooltip experience on your site and want to have full control over the look and feel without needing to worry about positioning. You want it to be simple, flexible, and fully extensible to your needs.

A live demo can be found here.

Installation

yarn install @timcchang/react-tooltip

Basic usage

The simplest way to use Tooltip is to wrap it around the component that you want to trigger the tooltip:

import Tooltip from "@timcchang/react-tooltip"

export default function App() {
  const content = "Password needs to match;
  return(
    <Tooltip title={content} content={content}>
      <button>Register</button>
    </Tooltip>
  )
}

Props

The goal of this component is to ensure a minimal set of props. Here is what you should know:

children

React.ReactNode | required

Wrap Tooltip around any DOM element or React component. Because Tooltip uses refs under the hood, make sure that if you are rendering a custom component, ensure that you wrap your component with React.forwardRef.

title

string | required

title an explicit title label for the tooltip.

content

React.ReactNode

Render custom components as the content of your tooltip.

Using content, you can pass custom components that animate like so:

tooltip animating demo

caret

React.ReactNode

Render a custom caret. See /example/src/Demo.tsx for an example of default styles.

placement

"auto" | "top" | "top-end" | "top-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "right" / Defaults to "auto"

showTrigger

"hover" | "click"

This is what will trigger the tooltip to show.

leaveTrigger

"mouseleave" | "click" | "mouseleave-content"

This is what will hide the tooltip.

showDelay

number

Show the tooltip this amount of time (ms) after showTrigger fires.

hideDelay

number

Hide the tooltip this amount of time (ms) after leaveTrigger fires.

leaveTransitionMs

number

This is the amount of time (ms) you want your component to transition out.

Contributing

Contributions are welcome!

For issues, please feel free to add them here.

Please use yarn to manage dependencies. After running yarn install, run yarn start. Navigate to http://localhost:8080 and start hacking away!

Keywords

Install

npm i @timcchang/react-tooltip

DownloadsWeekly Downloads

694

Version

0.0.6-1

License

MIT

Unpacked Size

211 kB

Total Files

19

Last publish

Collaborators

  • avatar