Allow tooltips in <Input> and <Textarea> components

[MAILPOET-3089]

assets/js/src/common/form/input/input.tsx

@@ -1,5 +1,6 @@
 import React, { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
+import Tooltip from 'common/tooltip/tooltip';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   customLabel?: string,
@@ -7,6 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   isFullWidth?: boolean,
   iconStart?: JSX.Element,
   iconEnd?: JSX.Element,
+  tooltip?: string,
 };
 
 const Input = ({
@@ -16,6 +18,7 @@ const Input = ({
   isFullWidth,
   iconStart,
   iconEnd,
+  tooltip,
   ...attributes
 }: Props) => (
   <div
@@ -34,6 +37,16 @@ const Input = ({
     {iconStart}
     <input {...attributes} />
     {customLabel && <div className="mailpoet-form-input-label">{customLabel}</div>}
+    {tooltip && (
+      <>
+        <span className="mailpoet-form-tooltip-holder">
+          <span className="mailpoet-form-tooltip-icon" data-tip data-for={attributes.name} />
+        </span>
+        <Tooltip place="right" multiline id={attributes.name}>
+          {tooltip}
+        </Tooltip>
+      </>
+    )}
     {iconEnd}
   </div>
 );

assets/js/src/common/form/textarea/textarea.tsx

@@ -1,10 +1,12 @@
 import React, { TextareaHTMLAttributes } from 'react';
 import classnames from 'classnames';
+import Tooltip from 'common/tooltip/tooltip';
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   customLabel?: string,
   dimension?: 'small',
   isFullWidth?: boolean,
+  tooltip?: string,
 };
 
 const Textarea = ({
@@ -12,6 +14,7 @@ const Textarea = ({
   customLabel,
   dimension,
   isFullWidth,
+  tooltip,
   ...attributes
 }: Props) => (
   <div
@@ -29,6 +32,16 @@ const Textarea = ({
   >
     <textarea {...attributes} />
     {customLabel && <div className="mailpoet-form-input-label">{customLabel}</div>}
+    {tooltip && (
+      <>
+        <span className="mailpoet-form-tooltip-holder">
+          <span className="mailpoet-form-tooltip-icon" data-tip data-for={attributes.name} />
+        </span>
+        <Tooltip place="right" multiline id={attributes.name}>
+          {tooltip}
+        </Tooltip>
+      </>
+    )}
   </div>
 );