microsoft · micahgodbolt · May 8, 2017 · May 5, 2017 · May 5, 2017 · May 5, 2017
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Tooltip: Added custom content render function and exposed tooltip props to",
+      "type": "minor"
+    }
+  ],
+  "email": "micahgodbolt@gmail.com"
+}
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Tooltip } from './Tooltip';
 import { ICalloutProps } from '../../Callout';
+import { IRenderFunction } from '../../Utilities';
 import { DirectionalHint } from '../../common/DirectionalHint';
 
 export interface ITooltip {
@@ -27,6 +28,11 @@ export interface ITooltipProps extends React.HTMLProps<HTMLDivElement | Tooltip>
    */
   content?: string;
 
+  /**
+   *  Render function to populate content area
+   */
+  onRenderContent?: IRenderFunction<ITooltipProps>;
+
   /**
    * Length of delay. Can be set to zero if you do not want a delay.
    * @default medium

@@ -17,10 +17,13 @@
   }
 }
 
-.subText {
-  margin: 0;
+.content {
   font-size: $ms-font-size-s;
   color: $ms-color-neutralPrimary;
   word-wrap: break-word;
   overflow-wrap: break-word;
+}
+
+.subText {
+  margin: 0;
 }
@@ -29,7 +29,15 @@ export class Tooltip extends BaseComponent<ITooltipProps, any> {
   };
 
   public render() {
-    let { targetElement, content, calloutProps, directionalHint, delay, id } = this.props;
+    const {
+      targetElement,
+      content,
+      calloutProps,
+      directionalHint,
+      delay,
+      id,
+      onRenderContent = this._onRenderContent
+    } = this.props;
 
     return (
       <Callout
@@ -41,12 +49,18 @@ export class Tooltip extends BaseComponent<ITooltipProps, any> {
         {...calloutProps}
         { ...getNativeProps(this.props, divProperties) }
       >
-        <div className={ css('ms-Tooltip-content') }>
-          <p className={ css('ms-Tooltip-subText', styles.subText) } id={ id } role='tooltip'>
-            { content }
-          </p>
+        <div className={ css('ms-Tooltip-content', styles.content) } id={ id } role='tooltip'>
+          { onRenderContent(this.props, this._onRenderContent) }
         </div>
       </Callout >
     );
   }
+
+  private _onRenderContent(props: ITooltipProps): JSX.Element {
+    return (
+      <p className={ css('ms-Tooltip-subText', styles.subText) }>
+        { props.content }
+      </p>
+    );
+  }
 }
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TooltipHost } from './TooltipHost';
-import { TooltipDelay } from './Tooltip.Props';
+import { TooltipDelay, ITooltipProps } from './Tooltip.Props';
 import { ICalloutProps } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
 
@@ -31,6 +31,11 @@ export interface ITooltipHostProps extends React.HTMLProps<HTMLDivElement | Tool
    */
   calloutProps?: ICalloutProps;
 
+  /**
+   * Additional properties to pass through for Tooltip, reference detail properties in ITooltipProps
+   */
+  tooltipProps?: ITooltipProps;
+
   /**
    * Length of delay
    * @default medium

@@ -41,7 +41,16 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
 
   // Render
   public render() {
-    const { calloutProps, content, children, directionalHint, delay, id, hostClassName } = this.props;
+    const {
+      calloutProps,
+      tooltipProps,
+      content,
+      children,
+      directionalHint,
+      delay,
+      id,
+      hostClassName
+    } = this.props;
     const { isTooltipVisible } = this.state;
     const tooltipId = id || getId('tooltip');
     return (
@@ -57,6 +66,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
         { children }
         { isTooltipVisible && (
           <Tooltip
+            { ...tooltipProps }
             id={ tooltipId }
             delay={ delay }
             content={ content }

@@ -6,14 +6,14 @@ import {
   ComponentPage,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
-import { TooltipBottomExample } from './examples/Tooltip.Bottom.Example';
+import { TooltipCustomExample } from './examples/Tooltip.Custom.Example';
 import { TooltipBasicExample } from './examples/Tooltip.Basic.Example';
 import { TooltipOverflowExample } from './examples/Tooltip.Overflow.Example';
 
 import './TooltipPage.scss';
 
 const TooltipBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx') as string;
-const TooltipBottomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Bottom.Example.tsx') as string;
+const TooltipCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx') as string;
 const TooltipOverflowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx') as string;
 
 export class TooltipPage extends React.Component<any, any> {
@@ -24,12 +24,12 @@ export class TooltipPage extends React.Component<any, any> {
         componentName='TooltipExample'
         exampleCards={
           <LayerHost>
-            <ExampleCard title='Tooltip with custom gapSpace' code={ TooltipBasicExampleCode }>
+            <ExampleCard title='Tooltip' code={ TooltipBasicExampleCode }>
               <TooltipBasicExample />
             </ExampleCard>
 
-            <ExampleCard title='Tooltip Bottom Direction. No delay' code={ TooltipBottomExampleCode }>
-              <TooltipBottomExample />
+            <ExampleCard title='Custom Tooltip' code={ TooltipCustomExampleCode }>
+              <TooltipCustomExample />
             </ExampleCard>
 
             <ExampleCard title='Tooltip only on overflow' code={ TooltipOverflowExampleCode }>

@@ -12,7 +12,7 @@ export class TooltipBasicExample extends BaseComponent<any, any> {
   public render() {
     return (
       <div>
-        <TooltipHost content='This is the tooltip' id='myID' calloutProps={ { gapSpace: 25 } }>
+        <TooltipHost content='This is the tooltip' id='myID' calloutProps={ { gapSpace: 0 } }>
           <DefaultButton aria-describedby='myID'>Hover Over Me</DefaultButton>
         </TooltipHost>
       </div>

@@ -0,0 +1,41 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import {
+  TooltipHost,
+  TooltipDelay,
+  DirectionalHint
+} from 'office-ui-fabric-react/lib/Tooltip';
+
+export class TooltipCustomExample extends BaseComponent<any, any> {
+
+  public render() {
+    return (
+      <TooltipHost
+        calloutProps={ { gapSpace: 20 } }
+        tooltipProps={ {
+          onRenderContent: () => {
+            return (
+              <div>
+                <ul style={ { margin: 0, padding: 0 } }>
+                  <li>1. One</li>
+                  <li>2. Two</li>
+                </ul>
+              </div>
+            );
+          }
+        } }
+        delay={ TooltipDelay.zero }
+        id='customID'
+        directionalHint={ DirectionalHint.bottomCenter }
+      >
+        <DefaultButton
+          aria-describedby='customID'
+          text='Hover Over Me'
+        />
+      </TooltipHost>
+    );
+  }
+}