Skip to content
PatternFly logo

Tooltips

Introduction

Note: PatternFly React charts live in its own package at @patternfly/react-charts!

PatternFly React charts are based on the Victory chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.

Examples

Voronoi container

This demonstrates how to use a voronoi container to display tooltips.

Area chart example chart titleAverage number of pets - possibly more information to summarize the data in the chart.201520162017201820192468CatsDogsBirds

Combined cursor and voronoi containers

This demonstrates how to combine cursor and voronoi containers to display tooltips along with a vertical cursor.

Line chart example chart titleAverage number of pets - possibly more information to summarize the data in the chart.2015201620172018258CatsDogsBirdsMice

Embedded legend

This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.

Embedded legend example chart titleAverage number of pets - possibly more information to summarize the data in the chart.2015201620172018258CatsDogsBirdsMice

Embedded HTML

This demonstrates how to embed HTML within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.

Embedded html example chart titleAverage number of pets - possibly more information to summarize the data in the chart.201520162017201820192468CatsDogsBirds

Embedded legend with custom font size

This demonstrates how to embed a legend within a tooltip, but with a custom font size. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.

Embeded legend with custom font size example chart titleAverage number of pets - possibly more information to summarize the data in the chart.2015201620172018258CatsDogsBirdsMice

Data label

This demonstrates an alternate way of applying tooltips using data labels.

Data label example chart titleAverage number of pets - possibly more information to summarize the data in the chart.2015201620172018510152025CatsDogsBirdsMice

Legend

This demonstrates an approach for applying tooltips to a legend using a custom label component.

Legend example chart titleAverage number of pets - possibly more information to summarize the data in the chart.Cats: 35Dogs: 55Birds: 10

Left aligned

This demonstrates how to customize tooltip label alignment using theme properties.

Left aligned example chart titleAverage number of pets - possibly more information to summarize the data in the chart.2015201620172018258CatsDogsBirdsMice

CSS overflow

This demonstrates an alternate way of applying tooltips using CSS overflow instead of constrainToVisibleArea.

CSS overflow example chart titleAverage number of pets - possibly more information to summarize the data in the chart.
CPU utilizationCPU utilization

Wrapped chart

This demonstrates an alternate way of applying tooltips by wrapping charts with the Tooltip component.

Wrapped example chart titleStorage capacity - possibly more information to summarize the data in the chart.45%of 100 GBps

Documentation

Tips

  • See Victory's FAQ

Note

Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here:

Props

ChartTooltip

ChartTooltip renders a tooltip component with a set of default events. When ChartTooltip is used as a label component for any Victory based component that renders data, it will attach events to rendered data components that will activate the tooltip when hovered or focused. ChartTooltipTooltip renders text as well as a configurable Flyout container. Note: When providing tooltips for ChartLine or ChartArea, it is necessary to use ChartVoronoiContainer, as these components only render a single element for the entire dataset. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-tooltip/src/index.d.ts
*required
NameTypeDefaultDescription
activateDatabooleanWhen true, tooltip events will set the active prop on both data and label elements.
activebooleanThe active prop specifies whether the tooltip component should be displayed.
anglestring | numberThe angle prop specifies the angle to rotate the tooltip around its origin point.
center{ x: number; y: number }The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for positioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with ChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set, non-zero pointerLength values will no longer be respected.
centerOffset{ x: number | Function, y: number | Function }The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout pointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a function that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be respected.
constrainToVisibleAreabooleanfalseThe constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.
cornerRadiusnumber | FunctionThe cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum.
dataany[]Victory components can pass a data prop to their label component. This can be useful in custom components that need to make use of the entire dataset.
datum{}Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, and determine text.
dxnumber | FunctionThe dx prop defines a horizontal shift from the x coordinate.
dynumber | FunctionThe dy prop defines a vertical shift from the y coordinate.
eventsobjectThe events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory’s event system, event handlers will be called with the event, the props of the component is attached to, and an eventKey. @example events={{onClick: (evt) => alert("x: " + evt.clientX)}}
flyoutComponentReact.ReactElement<any>The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip. The new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy, index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If flyoutComponent is omitted, a default Flyout component will be created with props described above. @example flyoutComponent={<Flyout x={50} y={50}/>}, flyoutComponent={<MyCustomFlyout/>}
flyoutHeightnumber | FunctionThe flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, height will be determined based on an approximate text size calculated from the text and style props provided to ChartTooltip.
flyoutStylenumber | FunctionThe style prop applies SVG style properties to the rendered flyout container. These props will be passed to the flyoutComponent.
flyoutWidthnumber | FunctionThe flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size calculated from the text and style props provided to VictoryTooltip.
groupComponentReact.ReactElement<any>The groupComponent prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a <g> tag.}
horizontalbooleanThe horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. This is useful when an orientation prop is not provided, and data will determine the default orientation. i.e. negative values result in a left orientation and positive values will result in a right orientation by default.
indexnumber | stringThe index prop represents the index of the datum in the data array.
labelComponentReact.ReactElement<any><ChartLabel />The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, datum, verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new ChartLabel will be created with the props described above. @example labelComponent={<ChartLabel dy={20}/>}, labelComponent={<MyCustomLabel/>}
labelTextAnchorstring | FunctionDefines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid values are 'start', 'middle', 'end', and 'inherit'.
orientationstring | FunctionThe orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on. This prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these values. If this prop is not provided it will be determined from the sign of the datum, and the value of the horizontal prop.
pointerLengthnumber | FunctionThe pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum.
pointerOrientationstring | FunctionThis prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set, it will be determined based on the overall orientation of the flyout in relation to its data point, and any center or centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right.
pointerWidthnumber | FunctionThe pointerWidth prop determines the width of the base of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum.
renderInPortalbooleanWhen renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element within ChartContainer. Note: This prop should not be set to true when using a custom container element.
styleReact.CSSProperties | React.CSSProperties[]The style prop applies CSS properties to the rendered `<text>` element.
textnumber | string | Function | string[] | number[]The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or function of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which ChartLabel will split in to separate <tspan/> elements.
themeobjectgetTheme(themeColor)The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme may be overwritten by props specified on the component instance.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
xnumberThe x prop defines the x coordinate to use as a basis for horizontal positioning.
ynumberThe y prop defines the y coordinate to use as a basis for vertical positioning.

View source on GitHub