The RPTooltip component wraps content and shows a tooltip on hover. It is designed to work with RPButton (e.g. icon button with a label that appears on hover). The component renders its children inside a div that acts as the tooltip trigger. The tooltip appears after a short delay (1 second by default) and includes an arrow pointer.

RPTooltip is built on Radix UI Tooltip and styled to match the React PDF Viewer component’s interface.

Props

Name	Type	Description
children	React.ReactNode	The content that triggers the tooltip (e.g. a button, icon, or custom UI).
content	string	(optional) The text shown in the tooltip.
className	string	(optional) Additional CSS classes to apply to the trigger wrapper div.
style	React.CSSProperties	(optional) Inline styles for the trigger wrapper div.

Styling

The tooltip popover uses styles from the React PDF Viewer’s design system, including the tooltip content area and arrow. You can target or extend it with the className and style props.

Accessibility

RPTooltip is built on Radix UI Tooltip, which provides keyboard support and ARIA attributes for accessibility. The tooltip content is associated with the trigger for screen readers, and focus management follows accessibility best practices.

Usage

Basic tooltip with icon

You can wrap any element with RPTooltip, including icon-only buttons.

import { RPTooltip } from '@pdf-viewer/react'

export const IconWithTooltip = () => {
  return (
    <RPTooltip content="Download">
      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 10L4 6h8L8 10z" />
      </svg>
    </RPTooltip>
  )
}

Button with Tooltip

RPTooltip is designed to be used with RPButton. Place RPButton as the child of RPTooltip to get a toolbar-style button that shows a label on hover.

import { RPButton, RPTooltip } from '@pdf-viewer/react'

export const ToolbarButton = () => {
  return (
    <RPTooltip content="Zoom in">
      <RPButton onClick={() => console.log('Zoom in')}>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
          <path d="M8 2L2 8l6 6 6-6-6-6z" />
        </svg>
      </RPButton>
    </RPTooltip>
  )
}

Tooltip with Custom Styling

Use className and style to customize the trigger wrapper. This does not change the tooltip popover itself, which uses React PDF’s styles.

import { RPTooltip } from '@pdf-viewer/react'

export const CustomTooltip = () => {
  return (
    <RPTooltip
      content="Custom trigger"
      className="my-trigger-class"
      style={{ padding: '8px', display: 'inline-flex' }}
    >
      <span>Hover me</span>
    </RPTooltip>
  )
}