react-popper-tooltip

What is react-popper-tooltip?

The react-popper-tooltip package is a React wrapper for Popper.js, which is a library used to position tooltips and popovers in web applications. It provides a simple and flexible way to create tooltips that are dynamically positioned based on the user's viewport and other elements on the page.

What are react-popper-tooltip's main functionalities?

Basic Tooltip

This code demonstrates how to create a basic tooltip using the react-popper-tooltip package. The tooltip appears when the user hovers over the button.

import React from 'react';
import { usePopperTooltip } from 'react-popper-tooltip';
import 'react-popper-tooltip/dist/styles.css';

const BasicTooltip = () => {
  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip();

  return (
    <div>
      <button ref={setTriggerRef}>Hover me</button>
      {visible && (
        <div ref={setTooltipRef} {...getTooltipProps({ className: 'tooltip-container' })}>
          Tooltip content
        </div>
      )}
    </div>
  );
};

export default BasicTooltip;

Custom Tooltip

This code demonstrates how to create a custom tooltip that appears on click and is positioned to the right of the trigger element.

import React from 'react';
import { usePopperTooltip } from 'react-popper-tooltip';
import 'react-popper-tooltip/dist/styles.css';

const CustomTooltip = () => {
  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
    placement: 'right',
    trigger: 'click',
  });

  return (
    <div>
      <button ref={setTriggerRef}>Click me</button>
      {visible && (
        <div ref={setTooltipRef} {...getTooltipProps({ className: 'tooltip-container' })}>
          Custom Tooltip content
        </div>
      )}
    </div>
  );
};

export default CustomTooltip;

Tooltip with Arrow

This code demonstrates how to create a tooltip with an arrow using the react-popper-tooltip package. The tooltip appears when the user hovers over the button and includes an arrow pointing to the trigger element.

import React from 'react';
import { usePopperTooltip } from 'react-popper-tooltip';
import 'react-popper-tooltip/dist/styles.css';

const TooltipWithArrow = () => {
  const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
    arrow: true,
  });

  return (
    <div>
      <button ref={setTriggerRef}>Hover me</button>
      {visible && (
        <div ref={setTooltipRef} {...getTooltipProps({ className: 'tooltip-container' })}>
          Tooltip with arrow
          <div {...getArrowProps({ className: 'tooltip-arrow' })} />
        </div>
      )}
    </div>
  );
};

export default TooltipWithArrow;

Other packages similar to react-popper-tooltip

react-tooltip

react-tooltip is a popular package for creating tooltips in React applications. It offers a wide range of customization options and supports various trigger events. Compared to react-popper-tooltip, react-tooltip is more feature-rich but may have a steeper learning curve.

react-bootstrap

react-bootstrap is a popular UI library for React that includes a Tooltip component. It is built on top of Bootstrap and provides a set of pre-styled components. Compared to react-popper-tooltip, react-bootstrap is more opinionated and may be easier to use for developers already familiar with Bootstrap.

README

React Tooltip

React tooltip component based on react-popper, the React wrapper around popper.js library.

Example

https://codesandbox.io/s/pykkz77z5j

Usage

npm install react-popper-tooltip

import React from 'react';
import { render } from 'react-dom';
import TooltipTrigger from 'react-popper-tooltip';

render(
  <TooltipTrigger
    placement="right"
    trigger="click"
    tooltip={({
      getTooltipProps,
      getArrowProps,
      tooltipRef,
      arrowRef,
      placement
    }) => (
      <div
        {...getTooltipProps({
          ref: tooltipRef,
          className: 'tooltip-container'
          /* your props here */
        })}
      >
        <div
          {...getArrowProps({
            ref: arrowRef,
            'data-placement': placement,
            className: 'tooltip-arrow'
            /* your props here */
          })}
        />
        <div className="tooltip-body">Hello, World!</div>
      </div>
    )}
  >
    {({ getTriggerProps, triggerRef }) => (
      <div
        {...getTriggerProps({
          ref: triggerRef,
          className: 'trigger'
          /* your props here */
        })}
      >
        Click Me!
      </div>
    )}
  </TooltipTrigger>,
  document.getElementById('root')
);

TooltipTrigger is the only component exposed by the package. It's just a positioning engine. What to render is left completely to the user, which can be provided using render props. Your props should be passed through getTriggerProps, getTooltipProps and getArrowProps.

Read more about render prop pattern if you're not familiar with this approach.

Quick start

If you would like our opinionated container and arrow styles for your tooltip for quick start, you may import react-popper-tooltip/dist/styles.css, and use the classes tooltip-container and tooltip-arrow as follows:

Tooltip.js

import React from 'react';
import TooltipTrigger from 'react-popper-tooltip';
import 'react-popper-tooltip/dist/styles.css';

const Tooltip = ({ tooltip, children, ...props }) => (
  <TooltipTrigger
    {...props}
    tooltip={({
      getTooltipProps,
      getArrowProps,
      tooltipRef,
      arrowRef,
      placement
    }) => (
      <div
        {...getTooltipProps({
          ref: tooltipRef,
          className: 'tooltip-container'
        })}
      >
        <div
          {...getArrowProps({
            ref: arrowRef,
            'data-placement': placement,
            className: 'tooltip-arrow'
          })}
        />
        {tooltip}
      </div>
    )}
  >
    {({ getTriggerProps, triggerRef }) => (
      <span
        {...getTriggerProps({
          ref: triggerRef,
          className: 'trigger'
        })}
      >
        {children}
      </span>
    )}
  </TooltipTrigger>
);

export default Tooltip;

Then you can use it as shown in the example below.

<Tooltip placement="top" trigger="click" tooltip="Hi there!">Click me</Tooltip>

Props

children

function({}) | required

This is called with an object. Read more about the properties of this object in the section "Children and tooltip functions".

tooltip

function({}) | required

This is called with an object. Read more about the properties of this object in the section "Children and tooltip functions".

defaultTooltipShown

boolean | defaults to false

This is the initial visibility state of the tooltip.

tooltipShown

boolean | control prop

Use this prop if you want to control the visibility state of the tooltip.

Package manages its own state internally. You can use this prop to pass the visibility state of the tooltip from the outside.

delayShow

number | defaults to 0

Delay in showing the tooltip (ms).

delayHide

number | defaults to 0

Delay in hiding the tooltip (ms).

placement

string | defaults to right

The tooltip placement. Valid placements are:

• auto
• top
• right
• bottom
• left

Each placement can have a variation from this list:

• -start
• -end

trigger

string | defaults to hover

The event that triggers the tooltip. One of click, hover, right-click, none.

closeOnOutOfBoundaries

boolean | defaults to true

Whether to close the tooltip when it's trigger is out of the boundary.

modifiers

object

Modifiers passed directly to the underlying popper.js instance. For more information, refer to Popper.js’ modifier docs

Modifiers, applied by default:

{
  preventOverflow: {
    boundariesElement: 'viewport',
    padding: 0
  }
}

You also have the ability to attach ref to the TooltipTrigger component which exposes following methods for programmatic control of the tooltip:

• showTooltip (show immediately)
• hideTooltip (hide immediately)
• toggleTooltip (toggle immediately)
• scheduleShow (show respecting delayShow prop)
• scheduleHide (hide respecting delayHide prop)
• scheduleToggle (toggle respecting delayShow and delayHide props)

Children and tooltip functions

This is where you render whatever you want. react-popper-tooltip uses two render props children and tooltip. Children prop is used to trigger the appearance of the tooltip and tooltip displays the tooltip itself.

You use it like so:

const tooltip = (
  <TooltipTrigger
    tooltip={tooltip => (<div>{/* more jsx here */}</div>)}
  >
    {trigger => (<div>{/* more jsx here */}</div>)}
  </TooltipTrigger>
)

prop getters

See the blog post about prop getters

These functions are used to apply props to the elements that you render. It's advisable to pass all your props to that function rather than applying them on the element yourself to avoid your props being overridden (or overriding the props returned). For example <button {...getTriggerProps({ onClick: event => console.log(event))}>Click me</button>

children function

property	type	description
getTriggerProps	function({})	returns the props you should apply to the trigger element you render.
triggerRef	node	returns the react ref you should apply to the trigger element.

tooltip function

property	type	description
getTooltipProps	function({})	returns the props you should apply to the tooltip element you render.
tooltipRef	node	return the react ref you should apply to the tooltip element.
arrowStyle	object	return the styles you should apply to the tooltip arrow style attr.
arrowRef	node	return the react ref you should apply to the tooltip arrow you render.
placement	string	return the placement of the tooltip arrow element.

Inspiration and Thanks!

This library is based on react-popper, the official react wrapper around Popper.js.

Using of render props, prop getters and doc style of this library are heavily inspired by downshift.