[core] feat(MultistepDialog): tooltips on navigation buttons

packages/core/src/components/button/abstractButton.tsx

@@ -85,6 +85,9 @@ export interface IButtonProps<E extends HTMLButtonElement | HTMLAnchorElement =
     /** Whether this button should use small styles. */
     small?: boolean;
 
+    /** Tooltip content to display when the button is disabled */
+    tooltipContent?: string;
+
     /**
      * HTML `type` attribute of button. Accepted values are `"button"`, `"submit"`, and `"reset"`.
      * Note that this prop has no effect on `AnchorButton`; it only affects `Button`.

packages/core/src/components/dialog/dialogStep.tsx

@@ -22,7 +22,7 @@ import { DISPLAYNAME_PREFIX, HTMLDivProps, Props } from "../../common/props";
 import { ButtonProps } from "../button/buttons";
 
 export type DialogStepId = string | number;
-export type DialogStepButtonProps = Partial<Pick<ButtonProps, "disabled" | "text">>;
+export type DialogStepButtonProps = Partial<Pick<ButtonProps, "disabled" | "text" | "tooltipContent">>;
 
 // eslint-disable-next-line deprecation/deprecation
 export type DialogStepProps = IDialogStepProps;

packages/core/src/components/dialog/multistepDialog.tsx

@@ -17,6 +17,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
+import { Tooltip2 } from "../../../../popover2/src/tooltip2";
 import { AbstractPureComponent2, Classes, Position, Utils } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
 import { Button, ButtonProps } from "../button/buttons";
@@ -233,30 +234,63 @@ export class MultistepDialog extends AbstractPureComponent2<MultistepDialogProps
         if (this.state.selectedIndex > 0) {
             const backButtonProps = steps[selectedIndex].props.backButtonProps ?? this.props.backButtonProps;
 
-            buttons.push(
+            if (backButtonProps?.tooltipContent) {
+                buttons.push(
+                    <Tooltip2 content={backButtonProps?.tooltipContent} hoverOpenDelay={100}>
+                        <Button
+                            key="back"
+                            onClick={this.getDialogStepChangeHandler(selectedIndex - 1)}
+                            text="Back"
+                            {...backButtonProps}
+                        />
+                    </Tooltip2>,
+                );
+            } else {
                 <Button
                     key="back"
                     onClick={this.getDialogStepChangeHandler(selectedIndex - 1)}
                     text="Back"
                     {...backButtonProps}
-                />,
-            );
+                />;
+            }
         }
 
         if (selectedIndex === this.getDialogStepChildren().length - 1) {
-            buttons.push(<Button intent="primary" key="final" text="Submit" {...this.props.finalButtonProps} />);
+            if (this.props.finalButtonProps?.tooltipContent) {
+                buttons.push(
+                    <Tooltip2 content={this.props.finalButtonProps?.tooltipContent} hoverOpenDelay={100}>
+                        <Button intent="primary" key="final" text="Submit" {...this.props.finalButtonProps} />
+                    </Tooltip2>,
+                );
+            } else {
+                buttons.push(<Button intent="primary" key="final" text="Submit" {...this.props.finalButtonProps} />);
+            }
         } else {
             const nextButtonProps = steps[selectedIndex].props.nextButtonProps ?? this.props.nextButtonProps;
 
-            buttons.push(
-                <Button
-                    intent="primary"
-                    key="next"
-                    onClick={this.getDialogStepChangeHandler(selectedIndex + 1)}
-                    text="Next"
-                    {...nextButtonProps}
-                />,
-            );
+            if (nextButtonProps?.tooltipContent) {
+                buttons.push(
+                    <Tooltip2 content={nextButtonProps?.tooltipContent} hoverOpenDelay={100}>
+                        <Button
+                            intent="primary"
+                            key="next"
+                            onClick={this.getDialogStepChangeHandler(selectedIndex + 1)}
+                            text="Next"
+                            {...nextButtonProps}
+                        />
+                    </Tooltip2>,
+                );
+            } else {
+                buttons.push(
+                    <Button
+                        intent="primary"
+                        key="next"
+                        onClick={this.getDialogStepChangeHandler(selectedIndex + 1)}
+                        text="Next"
+                        {...nextButtonProps}
+                    />,
+                );
+            }
         }
 
         return buttons;

packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx

@@ -115,7 +115,10 @@ export class MultistepDialogExample extends React.PureComponent<
                     icon="info-sign"
                     navigationPosition={position}
                     onClose={this.handleClose}
-                    nextButtonProps={{ disabled: this.state.value === undefined }}
+                    nextButtonProps={{
+                        disabled: this.state.value === undefined,
+                        tooltipContent: this.state.value === undefined ? "Needs an input." : null,
+                    }}
                     finalButtonProps={finalButtonProps}
                     title={hasTitle ? "Multistep dialog" : undefined}
                     {...state}