From c766b5ed8ac7fb89be66d9b796f66f7f4bb83448 Mon Sep 17 00:00:00 2001
From: Ross Brodbeck <hross@hross.net>
Date: Tue, 2 May 2017 06:24:14 -0400
Subject: [PATCH] TooltipHost: Add className and fix example button

---
 .../add-tooltip-className_2017-05-02-10-28.json        | 10 ++++++++++
 .../src/components/Tooltip/TooltipHost.Props.ts        |  5 +++++
 .../src/components/Tooltip/TooltipHost.tsx             |  4 ++--
 .../Tooltip/examples/Tooltip.Overflow.Example.tsx      |  4 ++--
 4 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 common/changes/add-tooltip-className_2017-05-02-10-28.json

diff --git a/common/changes/add-tooltip-className_2017-05-02-10-28.json b/common/changes/add-tooltip-className_2017-05-02-10-28.json
new file mode 100644
index 00000000000000..ce1faaf76083d9
--- /dev/null
+++ b/common/changes/add-tooltip-className_2017-05-02-10-28.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "TooltipHost: Add host className",
+      "type": "patch"
+    }
+  ],
+  "email": "hross@hross.net"
+}
\ No newline at end of file
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 bbe34dc3671391..90cebe8ec02f9b 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
@@ -53,4 +53,9 @@ export interface ITooltipHostProps extends React.HTMLProps<HTMLDivElement | Tool
    * It also uses the parent as target element for the tooltip.
    */
   overflowMode?: TooltipOverflowMode;
+
+  /**
+   * Optional class name to apply to tooltip host.
+   */
+  hostClassName?: string;
 }
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 31438bce137014..4289278f38a7db 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
@@ -41,12 +41,12 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
 
   // Render
   public render() {
-    const { calloutProps, content, children, directionalHint, delay, id } = this.props;
+    const { calloutProps, content, children, directionalHint, delay, id, hostClassName } = this.props;
     const { isTooltipVisible } = this.state;
     const tooltipId = id || getId('tooltip');
     return (
       <div
-        className={ css('ms-TooltipHost', styles.host) }
+        className={ css('ms-TooltipHost', styles.host, hostClassName) }
         ref={ this._resolveRef('_tooltipHost') }
         { ...{ onFocusCapture: this._onTooltipMouseEnter } }
         { ...{ onBlurCapture: this._onTooltipMouseLeave } }
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx
index 938e809175fdfb..7fd1d95f7895bc 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
-import { Button } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import {
   TooltipHost,
   TooltipOverflowMode
@@ -20,7 +20,7 @@ export class TooltipOverflowExample extends BaseComponent<any, any> {
   public render() {
     return (
       <div>
-        <Button onClick={ () => this.setState({ overflow: !this.state.overflow }) }>Toggle showing overflow</Button>
+        <DefaultButton onClick={ () => this.setState({ overflow: !this.state.overflow }) }>Toggle showing overflow</DefaultButton>
 
         <div style={ {
           marginTop: '40px'