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 component based on react-popper

Usage

1. npm install react-popper-tooltip
2. import TooltipTrigger from 'react-popper-tooltip'

  <TooltipTrigger
    tooltip={<TooltipComponent />}
  >
    <TriggerComponent />
  </TooltipTrigger>

Props

{
    /**
     * trigger
     */
    children: T.node.isRequired,
    /**
     * tooltip
     */
    tooltip: T.node.isRequired,
    /**
     * class to be applied to trigger container span
     */
    triggerClassName: T.string,
    /**
     * style to be applied on trigger container span
     */
    triggerStyle: T.object,
    /**
     * class to be applied to tooltip container span
     */
    tooltipClassName: T.string,
    /**
     * style to be applied on tooltip container span
     */
    tooltipStyle: T.object,
    /**
     * whether tooltip is shown by default
     */
    isTooltipShown: T.bool,
    /**
     * delay in showing the tooltip
     */
    delayShow: T.number,
    /**
     * delay in hiding the tooltip
     */
    delayHide: T.number,
    /**
     * whether to show arrow or not
     */
    showArrow: T.bool,
    /**
     * Popper’s placement. Valid placements are:
     *  - auto
     *  - top
     *  - right
     *  - bottom
     *  - left
     * Each placement can have a variation from this list:
     *  -start
     *  -end
     */
    placement: T.string,
    /**
     * the event that triggers the tooltip
     */
    trigger: T.oneOf(['click', 'hover', 'right-click', 'none']),
    /**
     * whether to close the tooltip when it's trigger is out of the boundary
     */
    closeOnOutOfBoundaries: T.bool,
    /**
     * modifiers passed directly to the underlying popper.js instance
     * For more information, refer to Popper.js’ modifier docs:
     * @link https://popper.js.org/popper-documentation.html#modifiers
     */
    modifiers: T.object
}

Example

https://codesandbox.io/s/pykkz77z5j

Check out

https://popper.js.org