diff --git a/src/components/TextAreaField/TextAreaField.css b/src/components/TextAreaField/TextAreaField.css
index 042785d5..52d14473 100644
--- a/src/components/TextAreaField/TextAreaField.css
+++ b/src/components/TextAreaField/TextAreaField.css
@@ -9,6 +9,11 @@
font-family: var(--font-family);
color: var(--secondary-text);
display: flex;
+ align-items: center;
+}
+
+.dcl.text-area > .title > .dui-info-tooltip__trigger {
+ margin-left: 7px;
}
.dcl.text-area > .title > .maxLength {
diff --git a/src/components/TextAreaField/TextAreaField.stories.tsx b/src/components/TextAreaField/TextAreaField.stories.tsx
index 9650f4db..5b07210a 100644
--- a/src/components/TextAreaField/TextAreaField.stories.tsx
+++ b/src/components/TextAreaField/TextAreaField.stories.tsx
@@ -28,6 +28,19 @@ storiesOf('TextArea', module)
cols="50"
/>
))
+ .add('With tooltip', () => (
+
+ ))
.add('Without label and max length', () => (
))
diff --git a/src/components/TextAreaField/TextAreaField.tsx b/src/components/TextAreaField/TextAreaField.tsx
index 477d5c2b..12a8eedb 100644
--- a/src/components/TextAreaField/TextAreaField.tsx
+++ b/src/components/TextAreaField/TextAreaField.tsx
@@ -5,6 +5,7 @@ import TextArea, {
} from 'semantic-ui-react/dist/commonjs/addons/TextArea/TextArea'
import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon'
import { getInputValueLength } from '../../lib/input'
+import { InfoTooltip, InfoTooltipProps } from '../InfoTooltip'
import './TextAreaField.css'
export type TextAreaFieldProps = TextAreaProps & {
@@ -13,6 +14,7 @@ export type TextAreaFieldProps = TextAreaProps & {
error?: string
warning?: string
info?: string
+ tooltip?: InfoTooltipProps
}
function renderMessage(props: TextAreaFieldProps) {
@@ -58,6 +60,9 @@ export const TextAreaField = (props: TextAreaFieldProps): JSX.Element => {
{props.label || props.maxLength !== undefined ? (
{props.label ? : null}
+ {props.label && props.tooltip ? (
+
+ ) : null}
{props.maxLength ? (
{getInputValueLength(props.value)}/{props.maxLength}