diff --git a/common/changes/tooltip-custom-render_2017-05-05-21-12.json b/common/changes/tooltip-custom-render_2017-05-05-21-12.json
new file mode 100644
index 0000000000000..65fd11c3f6304
--- /dev/null
+++ b/common/changes/tooltip-custom-render_2017-05-05-21-12.json
@@ -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"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts
index 582e86cd76304..4d0f7054036a4 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts
@@ -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
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss
index a87c6ec778c02..2fc5607ef5aa4 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss
@@ -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;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
index 2dd3965cf7a1f..d98c08dfd2279 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
@@ -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>
+    );
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.Props.ts b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.Props.ts
index 90cebe8ec02f9..3aa8a9db16fd8 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.Props.ts
@@ -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
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
index 4289278f38a7d..21fec480c4618 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
@@ -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 }
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx
index 5130433dcdc00..a8728bfff5a14 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx
@@ -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 }>
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx
index 93fdc950b5f1c..8e849c64631d4 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx
@@ -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>
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Bottom.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Bottom.Example.tsx
deleted file mode 100644
index e4d88025b83d6..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Bottom.Example.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/* 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 TooltipBottomExample extends BaseComponent<any, any> {
-
-  public render() {
-    return (
-      <TooltipHost content='This is the tooltip' delay={ TooltipDelay.zero } id='bottomID' directionalHint={ DirectionalHint.bottomCenter }>
-        <DefaultButton
-          aria-describedby='bottomID'
-          text='Hover Over Me'
-        />
-      </TooltipHost>
-    );
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx
new file mode 100644
index 0000000000000..85d195fc33d61
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx
@@ -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>
+    );
+  }
+}
\ No newline at end of file