From 2e326d1cb8f9ba22273ed089479b431b7ef08ab0 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 1 May 2019 15:47:51 -0700
Subject: [PATCH] FormLabel: allow any rather than just a string for tooltip
 (#16841)

---
 .../src/components/FormField/FormField.tsx        | 15 +++++++++++++--
 .../src/components/FormLabel/FormLabel.tsx        |  3 ++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx
index 310af17c5dda3..600fc4038b700 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.tsx
@@ -1,8 +1,10 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel';
+import { PopperContent } from '../Tooltip/PopperController';
 
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
+  tooltip?: PopperContent<any>;
   labelWidth?: number;
   inputWidth?: number;
   inputEl?: React.ReactNode;
@@ -17,10 +19,19 @@ const defaultProps = {
  * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass
  * custom inputEl if required in which case inputWidth and inputProps are ignored.
  */
-export const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputWidth, inputEl, ...inputProps }) => {
+export const FormField: FunctionComponent<Props> = ({
+  label,
+  tooltip,
+  labelWidth,
+  inputWidth,
+  inputEl,
+  ...inputProps
+}) => {
   return (
     <div className="form-field">
-      <FormLabel width={labelWidth}>{label}</FormLabel>
+      <FormLabel width={labelWidth} tooltip={tooltip}>
+        {label}
+      </FormLabel>
       {inputEl || <input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />}
     </div>
   );
diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
index eceaa0648083c..5e54cb2de4393 100644
--- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
+++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Tooltip } from '../Tooltip/Tooltip';
+import { PopperContent } from '../Tooltip/PopperController';
 
 interface Props {
   children: ReactNode;
@@ -8,7 +9,7 @@ interface Props {
   htmlFor?: string;
   isFocused?: boolean;
   isInvalid?: boolean;
-  tooltip?: string;
+  tooltip?: PopperContent<any>;
   width?: number;
 }