FormLabel: allow any rather than just a string for tooltip (#16841)

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>
   );

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;
 }