Fluentui: TooltipHost: calloutProps are not routed to callout

[snuziale]

Bug Report

• __Package version(s)__: 1.14.2
• __Browser and OS versions__: Any

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Yes
Requested priority: Low

Describe the issue:

Per the props ITooltipHost:

/**
 * Tooltip component props.
 */
export interface ITooltipHostProps extends React.HTMLProps<HTMLDivElement | TooltipHost> {
    /**
     * Properties to pass through for Callout, reference detail properties in ITooltipProps
     */
    calloutProps?: ITooltipProps;
    /**
     * Length of delay
     * @default medium
     */
    delay?: TooltipDelay;
    /**
     * String to be passed to the tooltip
     */
    content?: string;
    /**
     * Indicator of how the tooltip should be anchored to its targetElement.
     * @default DirectionalHint.topCenter
     */
    directionalHint?: DirectionalHint;
}

<TooltipHost content={fullPath} calloutProps={{ calloutProps: { gapSpace: 2 } }}>
   <div className="fileName">{fileName}</div>
</TooltipHost>

calloutProps are not honored.

[fantua]

You incorrectly passed calloutProps. Try:

<TooltipHost content={fullPath} calloutProps={{ gapSpace: 2 }}>

Instead of:

<TooltipHost content={fullPath} calloutProps={{ calloutProps: { gapSpace: 2 } }}>

[cschleiden]

@fantua No? calloutProps is of type ITooltipProps which contains calloutProps. We should pass it along here: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx#L54

[snuziale]

@cschleiden is correct.

[fantua]

Why calloutProps passed like ITooltipProps not like the ICalloutProps?

[micahgodbolt]

Yeah, i think the confusion is that tooltipHost has calloutProps, which should actually be tooltipProps. Still agree, it should pass through as expected.

[cschleiden]

I would bet that the TooltipHost property was copy/pasted tom the Tooltip props.

[micahgodbolt]

Ok, several things going wrong when I created this component. Wrong type on calloutProps, and I didn't actually mix those props in with the onDismiss before passing it to the Tooltip itself. Got a branch going as we speak.

[micahgodbolt]

@snuziale please take a look at #1325 and see if that fixes your problem. I also updated the example page to show how you'd pass that tooltipProps object in.

[micahgodbolt]

@fantua your suggestion was correct, the problem was that Tooltip wasn't mixing the props in when calling the Callout. That has been fixed.