@vx/tooltip

@vx/tooltip

npm install --save @vx/tooltip

The @vx/tooltip package provides utilities for making it easy to add Tooltips to a visualization and includes higher-order component (HOC) enhancers and Tooltip components.

Example:

import { withTooltip, TooltipWithBounds } from '@vx/tooltip';
import { localPoint } from '@vx/event';

class Chart extends React.Component {
  handleMouseOver = (event, datum) => {
    const coords = localPoint(event.target.ownerSVGElement, event);
    this.props.showTooltip({
      tooltipLeft: coords.x,
      tooltipTop: coords.y,
      tooltipData: datum
    });
  };

  render() {
    const {
      tooltipData,
      tooltipLeft,
      tooltipTop,
      tooltipOpen,
      hideTooltip
    } = this.props;

    return (
      // note React.Fragment is only available in >= react@16.2
      <React.Fragment>
        <svg width={...} height={...}>
          // Chart here...
          <SomeChartElement onMouseOver={this.handleMouseOver} onMouseOut={hideTooltip} />
        </svg>

        {tooltipOpen && (
          <TooltipWithBounds
            // set this to random so it correctly updates with parent bounds
            key={Math.random()}
            top={tooltipTop}
            left={tooltipLeft}
          >
            Data value <strong>{tooltipData}</strong>
          </TooltipWithBounds>
        )}
      </React.Fragment>
    );
  }
}

const ChartWithTooltip = withTooltip(Chart);

render(<ChartWithTooltip />, document.getElementById("root"));

Example codesandbox here.

Enhancers

withTooltip(BaseComponent [, containerProps])

If you would like to add tooltip state logic to your component, you may wrap it in withTooltip(BaseComponent [, containerProps]). The HOC will wrap your component in a div with relative positioning by default and handle state for tooltip positioning, visibility, and content by injecting the following props into your BaseComponent:

You may override the container by specifying containerProps as the second argument to withTooltip.

Name	Type	Description
showTooltip	func	Call this function with the signature func({ tooltipData, tooltipLeft, tooltipTop }) to set the tooltip state to the specified values.
hideTooltip	func	Call this function to close a tooltip, i.e., set the showTooltip state to false.
tooltipOpen	bool	Whether the tooltip state is open or closed
tooltipLeft	number	The tooltipLeft position passed to the showTooltip func, intended to be used for tooltip positioning
tooltipTop	number	The tooltipTop position passed to the showTooltip func, intended to be used for tooltip positioning
tooltipData	any	The tooltipData value passed to the showTooltip func, intended to be used for any data that your tooltip might need to render
updateTooltip	func	Call this function with the signature func({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData }) to set the tooltip state to the specified values.

Components

Tooltip

This is a simple Tooltip container component meant to be used to actually render a Tooltip. It accepts the following props, and will spread any additional props on the tooltip container div (i.e., ...restProps):

Name	Type	Default	Description
left	number or string	--	Sets style.left of the tooltip container
top	number or string	--	Sets style.top of the tooltip container
className	string	--	Adds a class (in addition to vx-tooltip-portal) to the tooltip container
style	object	--	Sets / overrides any styles on the tooltip container (including top and left)
children	node	--	Sets the children of the tooltip, i.e., the actual content

TooltipWithBounds

This tooltip component is exactly the same as Tooltip above, but it is aware of its boundaries meaning that it will flip left/right and bottom/top based on whether it would overflow its parent's boundaries. It accepts the following props, and will spread any additional props on the Tooltip component (i.e., ...restProps):

Name	Type	Default	Description
left	number	--	The horizontal position of the cursor, tooltip will be place to the left or right of this coordinate depending on the width of the tooltip and the size of the parent container.
top	number	--	The vertical position of the cursor, tooltip will be place to the bottom or top of this coordinate depending on the height of the tooltip and the size of the parent container.
offsetLeft	number	10	Horizontal offset of the tooltip from the passed left value, functions as a horizontal padding.
offsetRight	number	10	Vertical offset of the tooltip from the passed top value, functions as a vertical padding.
style	object	--	Sets / overrides any styles on the tooltip container (including top and left)
children	node	--	Sets the children of the tooltip, i.e., the actual content

Note that this component is positioned using a transform, so overriding left and top via styles may have no effect.

Changelog

v0.0.193

See the TypeScript project for a full list of issues + PRs.

:trophy: Contributors

• williaster
• hshoff
• Rudeg
• diagramatics
• geekplux
• dennisja

:rocket: Enhancements

• [@vx/*]
  • all packages re-written in TypeScript and export types under lib/index.d.ts
  • Many misc bug fixes with improved type safety, most propTypes are likely stricter now
• [brush] @vx/brush now exports a working Brush component :tada:
• [demo]
  • all gallery demos re-written with react hooks + types
  • new @vx/brush demo is added

:memo: Documentation

• [@vx/*] all components in all packages now have full doc strings. note: these is not yet reflected on the docs site.

:boom: Breaking Changes

• [boxplot] @vx/boxplot deprecated in favor of @vx/stats #561
• [mock-data] radius and distance values in the @vx/mock-data exoplanet dataset were updated from strings to numbers to remove the need for consumers to coerce to numbers themselves #579
• [drag] #499
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • Empty parent <g> wrapper around Drag children was replaced with a React.Fragment which removes a DOM element.
• [pattern] PatternOrientation is no longer the default export of @vx/patterns/lib/constants and is instead a named export. PatternOrientation is still used as the export name if importing from the index: import { PatternOrientation } from '@vx/pattern' #503
• [shape] #507
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • the Arc centroid prop was removed as it was not functional (it was called as if it was an arc.centroid() configuration parameter, but in reality the .centroid method is for returning the centroid of a datum.
  • the Area component is no longer wrapped in an empty <g> element
  • order and offset props for Stack, BarStack, BarStackHorizontal, and AreaStack previously supported string, array, or functions. Only the string prop was functional, and only the enumerated string presets are now allowed.
• [voronoi] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #512
• [network] #535
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • <Nodes /> inner node wrapper <g> element className changed to singular (vx-network-nodes => vx-network-node) and outer wrapper <g> was replaced with a React.Fragment
  • <Links /> inner link wrapper <g> element className changed to singular (vx-network-links => vx-network-link) and outer wrapper <g> was replaced with a React.Fragment
• [glyph] #518
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • (non-functional) children prop removed from GlyphDot component
• [heatmap] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #520
• [hierarchy] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #524
• [threshold] makes the Threshold id prop required #533
• [geo] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #537
• [legend] #551
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • the following directory structures were changed which will break deep imports: src/legends/* => src/*
• [stats] #570
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • the following directory structures were changed which will break deep imports
    • src/violinplot/ViolinPlot.jsx => src/ViolinPlot.tsx
    • src/boxplot/BoxPlot.jsx => src/BoxPlot.tsx

:house: Internal

• add TypeScript build support to monorepo #488
• [text] Remove deprecated lifecycles used in Text #576

Changes:
 - @vx/annotation: 0.0.192 => 0.0.193
 - @vx/axis: 0.0.192 => 0.0.193
 - @vx/bounds: 0.0.192 => 0.0.193
 - @vx/brush: 0.0.192 => 0.0.193
 - @vx/chord: 0.0.192 => 0.0.193
 - @vx/clip-path: 0.0.192 => 0.0.193
 - @vx/curve: 0.0.192 => 0.0.193
 - @vx/demo: 0.0.192 => 0.0.193
 - @vx/drag: 0.0.192 => 0.0.193
 - @vx/event: 0.0.192 => 0.0.193
 - @vx/geo: 0.0.192 => 0.0.193
 - @vx/glyph: 0.0.192 => 0.0.193
 - @vx/gradient: 0.0.192 => 0.0.193
 - @vx/grid: 0.0.192 => 0.0.193
 - @vx/group: 0.0.192 => 0.0.193
 - @vx/heatmap: 0.0.192 => 0.0.193
 - @vx/hierarchy: 0.0.192 => 0.0.193
 - @vx/legend: 0.0.192 => 0.0.193
 - @vx/marker: 0.0.192 => 0.0.193
 - @vx/mock-data: 0.0.192 => 0.0.193
 - @vx/network: 0.0.192 => 0.0.193
 - @vx/pattern: 0.0.192 => 0.0.193
 - @vx/point: 0.0.192 => 0.0.193
 - @vx/responsive: 0.0.192 => 0.0.193
 - @vx/scale: 0.0.192 => 0.0.193
 - @vx/shape: 0.0.192 => 0.0.193
 - @vx/stats: 0.0.192 => 0.0.193
 - @vx/text: 0.0.192 => 0.0.193
 - @vx/threshold: 0.0.192 => 0.0.193
 - @vx/tooltip: 0.0.192 => 0.0.193
 - @vx/voronoi: 0.0.192 => 0.0.193
 - @vx/vx: 0.0.192 => 0.0.193
 - @vx/zoom: 0.0.192 => 0.0.193