WithTooltip

import { WithTooltip } from '@dr.pogodin/react-utils';

WithTooltip implements a simple to use tooltip component, themed using React Themes library.

Demo

Hover to see the tooltip.

Find the source code below.

Properties

• children - React.Node - Component children are rendered in the place of WithTooltip component, and when hovered the tooltip is shown. By default the children are wrapped into <div> block with display: inline-block positioning.
• theme - WithTooltipTheme - Ad hoc React Themes theme.
• Other props of themed component.

WithTooltipTheme

See React Themes docs to learn how the visual theming of themed components works. The valid theme keys for WithTooltip are:

• appearance - The animation of tooltip appearance.
• arrow - The open tooltip's wrapper.
• container - The open tooltip's container.
• content - The open tooltip's content.
• wrapper - The <div> wrapper created around the rendered component children.

Examples

import { WithTooltip } from '@dr.pogodin/react-utils';

function WithTooltipExample() {
  return (
    <WithTooltip tip="This is an example tooltip">
      <p>Hover to see the tooltip.</p>
    </WithTooltip>
  );
}

export default WithTooltipExample;