diff --git a/website/docs/charts/box-plot.mdx b/website/docs/charts/box-plot.mdx
index 03d159388..83c4d2694 100644
--- a/website/docs/charts/box-plot.mdx
+++ b/website/docs/charts/box-plot.mdx
@@ -252,6 +252,111 @@ Events can be handled by passing an array of event objects to the `events` prop
```
+## Box Plot - Tooltips
+
+Tooltips are not displayed by default on VictoryBoxPlot; to enable tooltips, use a custom events prop to handle interactions.
+
+```jsx live noInline
+function App() {
+ const activate =
+ (label: string) => () =>
+ [
+ {
+ target: label,
+ mutation: () => ({
+ active: true,
+ }),
+ },
+ ];
+
+ const deactivate =
+ (label: string) => () =>
+ [
+ {
+ target: label,
+ mutation: () => ({
+ active: undefined,
+ }),
+ },
+ ];
+
+ const dataTypes = [
+ "min",
+ "max",
+ "q1",
+ "q3",
+ "median",
+ ];
+
+ const events = dataTypes.map(
+ (dataType) => ({
+ target: dataType,
+ eventHandlers: {
+ onMouseOver: activate(
+ `${dataType}Labels`,
+ ),
+ onFocus: activate(
+ `${dataType}Labels`,
+ ),
+ onTouchStart: activate(
+ `${dataType}Labels`,
+ ),
+ onMouseOut: deactivate(
+ `${dataType}Labels`,
+ ),
+ onBlur: deactivate(
+ `${dataType}Labels`,
+ ),
+ onTouchEnd: deactivate(
+ `${dataType}Labels`,
+ ),
+ },
+ }),
+ );
+
+ return (
+
+ }
+ maxLabelComponent={
+
+ }
+ q1LabelComponent={
+
+ }
+ q3LabelComponent={
+
+ }
+ medianLabelComponent={
+
+ }
+ data={[
+ { x: "red", y: [5, 10, 9, 2] },
+ { x: "blue", y: [1, 15, 6, 8] },
+ { x: "green", y: [3, 5, 6, 9] },
+ {
+ x: "yellow",
+ y: [5, 20, 8, 12],
+ },
+ {
+ x: "white",
+ y: [2, 11, 12, 13],
+ },
+ ]}
+ />
+ );
+}
+
+render();
+```
+
## Standalone Rendering
Box Plot charts can be rendered outside a VictoryChart.