react-popper-tooltip vs react-tooltip vs @reach/tooltip vs react-tippy
React Tooltip Libraries Comparison
1 Year
react-popper-tooltipreact-tooltip@reach/tooltipreact-tippySimilar Packages:
What's React Tooltip Libraries?

Tooltip libraries in React provide developers with the ability to create informative popups that appear when users hover over or focus on an element. These libraries enhance user experience by delivering contextual information without cluttering the interface. They often come with various customization options, positioning strategies, and accessibility features, making them essential for interactive web applications. Choosing the right tooltip library can significantly affect the usability and accessibility of your application.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-popper-tooltip1,541,47325093.3 kB7-MIT
react-tooltip1,511,0263,725864 kB177 days agoMIT
@reach/tooltip168,4336,00081.4 kB99-MIT
react-tippy121,889978-1045 years agoMIT
Feature Comparison: react-popper-tooltip vs react-tooltip vs @reach/tooltip vs react-tippy

Accessibility

  • react-popper-tooltip:

    react-popper-tooltip offers basic accessibility features, but developers need to implement ARIA attributes manually. It provides flexibility but requires additional effort to ensure full accessibility compliance.

  • react-tooltip:

    react-tooltip provides basic accessibility features but may require additional configuration to ensure full compliance with accessibility standards. Developers should be mindful of implementing ARIA attributes.

  • @reach/tooltip:

    @reach/tooltip is built with accessibility in mind, providing ARIA attributes and keyboard navigation support out of the box. This ensures that tooltips are usable by all users, including those using assistive technologies.

  • react-tippy:

    react-tippy includes some accessibility features, but developers must handle ARIA roles and keyboard navigation themselves. It is essential to ensure that tooltips are accessible to all users.

Customization

  • react-popper-tooltip:

    react-popper-tooltip provides extensive customization capabilities, allowing developers to control positioning, styling, and behavior. It is suitable for projects requiring a tailored tooltip experience.

  • react-tooltip:

    react-tooltip offers basic customization options, allowing for simple styling and positioning. However, it may not be as flexible as other libraries for advanced design needs.

  • @reach/tooltip:

    @reach/tooltip offers limited customization options, focusing on simplicity and adherence to best practices. While it allows basic styling, it may not cater to complex design requirements.

  • react-tippy:

    react-tippy excels in customization, offering a wide range of options for animations, themes, and placements. This makes it ideal for developers looking to create visually appealing tooltips.

Positioning

  • react-popper-tooltip:

    react-popper-tooltip utilizes Popper.js for advanced positioning capabilities, allowing tooltips to adapt dynamically to various screen sizes and orientations. This is beneficial for responsive designs.

  • react-tooltip:

    react-tooltip offers basic positioning options but may struggle with dynamic layouts. It is suitable for simpler use cases where advanced positioning is not a priority.

  • @reach/tooltip:

    @reach/tooltip has a straightforward positioning mechanism, but it may not handle complex layouts as effectively as other libraries. It is best suited for standard tooltip placements.

  • react-tippy:

    react-tippy supports multiple positioning options and can handle complex placements effectively. It provides developers with the flexibility to position tooltips in various ways based on their needs.

Learning Curve

  • react-popper-tooltip:

    react-popper-tooltip may require a bit more effort to understand due to its reliance on Popper.js for positioning. However, once familiar, developers can leverage its powerful features effectively.

  • react-tooltip:

    react-tooltip is straightforward and easy to learn, making it a good choice for beginners. Its simple API allows for quick implementation without a steep learning curve.

  • @reach/tooltip:

    @reach/tooltip has a gentle learning curve, making it easy for developers to implement and use. Its focus on accessibility and simplicity allows for quick integration into projects.

  • react-tippy:

    react-tippy has a moderate learning curve, especially for developers looking to utilize its extensive customization options. Understanding its API and configuration can take some time.

Performance

  • react-popper-tooltip:

    react-popper-tooltip is optimized for performance, leveraging Popper.js's efficient positioning algorithms. It can handle dynamic content and complex layouts without significant performance hits.

  • react-tooltip:

    react-tooltip is lightweight and performs adequately for basic use cases. However, it may not be as efficient in handling complex scenarios compared to other libraries.

  • @reach/tooltip:

    @reach/tooltip is lightweight and performs well, as it focuses on essential features without unnecessary overhead. This makes it suitable for applications where performance is critical.

  • react-tippy:

    react-tippy is also performance-oriented, but extensive customization may introduce some overhead. It is essential to balance customization with performance considerations.

How to Choose: react-popper-tooltip vs react-tooltip vs @reach/tooltip vs react-tippy
  • react-popper-tooltip:

    Select react-popper-tooltip if you need advanced positioning capabilities and want to leverage the Popper.js library for dynamic positioning. This package is ideal for complex layouts where tooltips need to adapt to various screen sizes and orientations.

  • react-tooltip:

    Use react-tooltip for a simple and easy-to-implement solution that provides basic tooltip functionality. It is suitable for projects that require minimal setup and straightforward usage without the need for advanced positioning or customization.

  • @reach/tooltip:

    Choose @reach/tooltip if you prioritize accessibility and want a simple, lightweight solution that adheres to ARIA standards. It is designed to work seamlessly with React and provides a straightforward API for creating tooltips.

  • react-tippy:

    Opt for react-tippy if you want a feature-rich tooltip library with extensive customization options, including animations and themes. It is built on top of Tippy.js, which offers a wide range of configurations for tooltips and popovers.

README for react-popper-tooltip

react-popper-tooltip

npm version npm downloads codecov

A React hook to effortlessly build smart tooltips. Based on react-popper and popper.js.

NOTE

  • This is the documentation for 4.x which introduced the usePopperTooltip hook.
  • If you're looking for the render prop version, see 3.x docs.
  • If you're looking to upgrade from 3.x render prop to 4.x hook, please refer to our migration guide.

Examples

Installation

You can install react-popper-tooltip with npm or yarn.

npm i react-popper-tooltip
# or
yarn add react-popper-tooltip

Quick start

This example illustrates how to create a minimal tooltip with default settings and using our default CSS file.

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

function App() {
  const {
    getArrowProps,
    getTooltipProps,
    setTooltipRef,
    setTriggerRef,
    visible,
  } = usePopperTooltip();

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

render(<App />, document.getElementById('root'));

Styling

With react-popper-tooltip, you can use CSS, LESS, SASS, or any CSS-in-JS library you're already using in your project. However, we do provide a minimal CSS-file file you can use for a quick start or as a reference to create your own tooltip styles.

Import react-popper-tooltip/dist/styles.css to import it into your project. Add classes tooltip-container and tooltip-arrow to the tooltip container and arrow element accordingly.

While the tooltip is being displayed, you have access to some attributes on the tooltip container. You can use them in your CSS in specific scenarios.

  • data-popper-placement: contains the current tooltip placement. You can use it to properly offset and display the arrow element (e.g., if the tooltip is displayed on the right, the arrow should point to the left and vice versa).

  • data-popper-reference-hidden: set to true when the trigger element is fully clipped and hidden from view, which causes the tooltip to appear to be attached to nothing. Set to false otherwise.

  • data-popper-escaped: set to true when the tooltip escapes the trigger element's boundary (and so it appears detached). Set to false otherwise.

  • data-popper-interactive: contains the current interactive option value.

API reference

usePopperTooltip

const {
  getArrowProps,
  getTooltipProps,
  setTooltipRef,
  setTriggerRef,
  tooltipRef,
  triggerRef,
  visible,
  ...popperProps
} = usePopperTooltip(
  {
    closeOnOutsideClick,
    closeOnTriggerHidden,
    defaultVisible,
    delayHide,
    delayShow,
    followCursor,
    interactive,
    mutationObserverOptions,
    offset,
    onVisibleChange,
    placement,
    trigger,
    visible,
  },
  popperOptions
);

Options

  • closeOnOutsideClick: boolean, defaults to true

If true, closes the tooltip when user clicks outside the trigger element.

  • closeOnTriggerHidden: boolean, defaults to false

Whether to close the tooltip when its trigger is out of boundary.

  • delayHide: number, defaults to 0

Delay in hiding the tooltip (ms).

  • delayShow: number, defaults to 0

Delay in showing the tooltip (ms).

  • defaultVisible: boolean, defaults to false

The initial visibility state of the tooltip when the hook is initialized.

  • followCursor: boolean, defaults to false

If true, the tooltip will stick to the cursor position. You would probably want to use this option with hover trigger.

  • mutationObserverOptions: MutationObserverInit | null, defaults to { attributes: true, childList: true, subtree: true }

Options to MutationObserver , used internally for updating tooltip position based on its DOM changes. When the tooltip is visible and its content changes, it automatically repositions itself. In some cases you may need to change which parameters to observe or opt-out of tracking the changes at all.

  • offset: [number, number], defaults to [0, 6]

This is a shorthand for popperOptions.modifiers offset modifier option. The default value means the tooltip will be placed 6px away from the trigger element (to reserve enough space for the arrow element).

We use this default value to match the size of the arrow element from our default CSS file. Feel free to change it if you are using your own styles.

See offset modifier docs.

popperOptions takes precedence over this option.

  • onVisibleChange: (state: boolean) => void

Called with the tooltip state, when the visibility of the tooltip changes.

  • trigger: TriggerType | TriggerType[] | null, where TriggerType = 'click' | 'right-click' | 'hover' | 'focus', defaults to hover

Event or events that trigger the tooltip. Use null if you want to disable all events. It's useful in cases when you control the state of the tooltip.

  • visible: boolean

The visibility state of the tooltip. Use this prop if you want to control the state of the tooltip. Note that delayShow and delayHide are not used if the tooltip is controlled. You have to apply delay on your external state.

react-popper-tooltip manages its own state internally and calls onVisibleChange handler with any relevant changes.

However, if more control is needed, you can pass this prop, and the state becomes controlled. As soon as it's not undefined, internally, react-popper-tooltip will determine its state based on your prop's value rather than its own internal state.

  • placement: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

The preferred placement of the tooltip. This is an alias for popperOptions.placement option.

popperOptions takes precedence over this option.

  • interactive: boolean, defaults to false

If true, hovering the tooltip will keep it open. Normally, if you trigger the tooltip on hover event, the tooltip closes when the mouse cursor moves out of the trigger element. If it moves to the tooltip element, the tooltip stays open. It's useful if you want to allow your users to interact with the tooltip's content (select and copy text, click a link, etc.). In this case you might want to increase delayHide value to give the user more time to react.

  • popperOptions: { placement, modifiers, strategy, onFirstUpdate }

These options passed directly to the underlying usePopper hook. See https://popper.js.org/docs/v2/constructors/#options.

Keep in mind, if you set placement or any modifiers here, it replaces offset and placement options above. They won't be merged into the final object. You have to add offset modifier along with others here to make it work.

Returns

  • triggerRef: HTMLElement | null

The trigger DOM element ref.

  • tooltipRef: HTMLElement | null

The tooltip DOM element ref.

  • setTooltipRef: (HTMLElement | null) => void | null

A tooltip callback ref. Must be assigned to the tooltip's ref prop.

  • setTriggerRef: (HTMLElement | null) => void | null

A trigger callback ref. Must be assigned to the trigger's ref prop.

  • visible: boolean

The current visibility state of the tooltip. Use it to display or hide the tooltip.

  • getArrowProps: (props) => mergedProps

This function merges your props and the internal props of the arrow element. We recommend passing all your props to that function rather than applying them on the element directly to avoid your props being overridden or overriding the internal props.

It returns the merged props that you need to pass to the arrow element.

  • getTooltipProps: (props) => mergedProps

This function merges your props and the internal props of the tooltip element. We recommend passing all your props to that function rather than applying them on the element directly to avoid your props being overridden or overriding the internal props.

It returns the merged props that you need to pass to tooltip element.

  • popperProps: { update, forceUpdate, state }

Some props returned by the underlying usePopper hook. See https://popper.js.org/react-popper/v2/hook.

This doesn't include styles and attributes props. They are included into getArrowProps and getTooltipProps prop getters.