diff --git a/src/components/CriteriaForm/CriteriaForm.i18n/en.json b/src/components/CriteriaForm/CriteriaForm.i18n/en.json
index cafa32f28..1ceaed1f5 100644
--- a/src/components/CriteriaForm/CriteriaForm.i18n/en.json
+++ b/src/components/CriteriaForm/CriteriaForm.i18n/en.json
@@ -1,10 +1,13 @@
 {
-    "Weight is required": "",
-    "Weight must be integer": "",
     "Weight": "No more than {upTo}",
     "Criteria or Goal": "",
     "Add achievement criteria": "",
     "Weight must be in range": "Weight must be between 1 and {upTo}",
     "Add": "",
-    "Title must be unique": ""
+    "Title must be unique": "",
+    "Press key to add criteria": "Press {key} to add the criteria",
+    "Enter goal name": "",
+    "Enter criteria": "",
+    "Search by goals": "",
+    "Weight must be integer": ""
 }
diff --git a/src/components/CriteriaForm/CriteriaForm.i18n/ru.json b/src/components/CriteriaForm/CriteriaForm.i18n/ru.json
index e672de3cc..d85e2485f 100644
--- a/src/components/CriteriaForm/CriteriaForm.i18n/ru.json
+++ b/src/components/CriteriaForm/CriteriaForm.i18n/ru.json
@@ -1,10 +1,13 @@
 {
-    "Weight is required": "Вес обязателен",
     "Weight must be integer": "Вес должен быть числом",
     "Weight": "Не более {upTo}",
     "Criteria or Goal": "Критерий или цель",
     "Add achievement criteria": "Добавить критерий",
     "Weight must be in range": "Вес критерия должен быть от 1 до {upTo}",
     "Add": "Добавить",
-    "Title must be unique": "Критерий должен быть уникальным"
+    "Title must be unique": "Критерий должен быть уникальным",
+    "Press key to add criteria": "Нажмите {key}, чтобы добавить критерий",
+    "Enter goal name": "Введите название цели",
+    "Enter criteria": "Укажите критерий",
+    "Search by goals": "Поиск по целям"
 }
diff --git a/src/components/CriteriaForm/CriteriaForm.tsx b/src/components/CriteriaForm/CriteriaForm.tsx
index 6556dc741..c4b2b6e46 100644
--- a/src/components/CriteriaForm/CriteriaForm.tsx
+++ b/src/components/CriteriaForm/CriteriaForm.tsx
@@ -1,26 +1,18 @@
-import React, { useState, useEffect, useCallback, useReducer, useRef, forwardRef, ReactEventHandler } from 'react';
+import React, { useState, useCallback, forwardRef, ReactEventHandler, useRef } from 'react';
 import styled from 'styled-components';
 import { zodResolver } from '@hookform/resolvers/zod';
-import {
-    ComboBox,
-    Button,
-    GoalIcon,
-    nullable,
-    FormInput,
-    useClickOutside,
-    useKeyboard,
-    KeyCode,
-    PlusIcon,
-} from '@taskany/bricks';
+import { Button, GoalIcon, FormInput, PlusIcon } from '@taskany/bricks';
 import { gray7, gray8 } from '@taskany/colors';
 import { Controller, UseFormSetError, useForm } from 'react-hook-form';
-import { Goal, State } from '@prisma/client';
+import { Goal } from '@prisma/client';
+import Popup from '@taskany/bricks/components/Popup';
 
 import { InlineTrigger } from '../InlineTrigger';
 import { AddCriteriaScheme, criteriaSchema } from '../../schema/criteria';
-import { Table, TableRow, TitleItem, ContentItem, Title, TextItem, TitleContainer } from '../Table';
-import { StateDot } from '../StateDot';
-import { trpc } from '../../utils/trpcClient';
+import { GoalSuggest } from '../GoalSuggest';
+import { InlineForm } from '../InlineForm';
+import { Keyboard } from '../Keyboard';
+import { Tip } from '../Tip';
 
 import { tr } from './CriteriaForm.i18n';
 
@@ -33,13 +25,6 @@ const StyledInlineTrigger = styled(InlineTrigger)`
     line-height: 28px;
 `;
 
-const StyledTableResults = styled(Table)`
-    position: relative;
-    grid-template-columns: 30px 210px 40px minmax(max-content, 120px);
-    width: fit-content;
-    z-index: 2;
-`;
-
 const StyledFormInput = styled(FormInput)`
     font-size: 14px;
     font-weight: normal;
@@ -55,9 +40,7 @@ const StyledFormInput = styled(FormInput)`
 
 const StyledTableRow = styled.div`
     display: grid;
-    grid-template-columns:
-        minmax(calc(250px + 10px /* gap of sibling table */), 20%)
-        repeat(2, max-content);
+    grid-template-columns: 35px minmax(calc(240px), 20%) repeat(2, max-content);
 `;
 
 const StyledSubmitButton = styled(Button)`
@@ -66,51 +49,6 @@ const StyledSubmitButton = styled(Button)`
     justify-content: center;
 `;
 
-interface GoalSuggestItemProps {
-    title: string;
-    state?: State | null;
-    projectId: string;
-    focused: boolean;
-    onClick: () => void;
-}
-
-const GoalSuggestItem: React.FC<GoalSuggestItemProps> = ({
-    onClick,
-    title,
-    projectId,
-    state,
-    focused,
-}): React.ReactElement => {
-    const handleClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-        (event) => {
-            event.preventDefault();
-            onClick();
-        },
-        [onClick],
-    );
-
-    return (
-        <TableRow onClick={handleClick} focused={focused}>
-            <ContentItem>
-                <GoalIcon size="s" />
-            </ContentItem>
-            <TitleItem>
-                <TitleContainer>
-                    <Title>{title}</Title>
-                </TitleContainer>
-            </TitleItem>
-            <ContentItem>
-                {nullable(state, (s) => (
-                    <StateDot size="m" title={s.title} hue={s.hue} />
-                ))}
-            </ContentItem>
-            <ContentItem>
-                <TextItem>{projectId}</TextItem>
-            </ContentItem>
-        </TableRow>
-    );
-};
-
 interface WeightFieldProps {
     name: 'weight';
     value?: string;
@@ -179,59 +117,9 @@ interface CriteriaTitleFieldProps {
 
 export const CriteriaTitleField = forwardRef<HTMLInputElement, CriteriaTitleFieldProps>(
     ({ name, value = '', error, onSelect, onChange, titles = [], setError }, ref) => {
-        const [completionVisible, setCompletionVisibility] = useState(false);
-        const [[text, type], setQuery] = useState<[string, 'plain' | 'search']>([value, 'plain']);
-
-        const results = trpc.goal.suggestions.useQuery(
-            {
-                input: text.slice(1),
-                limit: 5,
-            },
-            {
-                enabled: type === 'search' && text.length > 2,
-                staleTime: 0,
-                cacheTime: 0,
-            },
-        );
-
-        useEffect(() => {
-            if (value !== text) {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                setQuery(([_, prevType]) => {
-                    return [value, prevType];
-                });
-            }
-        }, [value, text]);
-
-        const handleInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
-            (event) => {
-                const { value } = event.target;
-
-                setQuery(() => {
-                    const isSearchInput = value[0] === '#';
-
-                    return [value, isSearchInput ? 'search' : 'plain'];
-                });
-
-                onChange(event);
-
-                setCompletionVisibility(true);
-            },
-            [onChange],
-        );
-
-        type GoalFromResults = NonNullable<typeof results.data>[number];
-
-        const handleSelectGoal = useCallback(
-            (item: GoalFromResults) => {
-                if (type === 'search') {
-                    onSelect(item);
-                    setQuery(['', 'plain']);
-                    setCompletionVisibility(false);
-                }
-            },
-            [onSelect, type],
-        );
+        const [type, setType] = useState<'plain' | 'search'>('plain');
+        const [popupVisible, setPopupVisible] = useState(false);
+        const btnRef = useRef<HTMLButtonElement>(null);
 
         const onlyUniqueTitleHandler = useCallback<React.FocusEventHandler<HTMLInputElement>>(
             (event) => {
@@ -247,34 +135,53 @@ export const CriteriaTitleField = forwardRef<HTMLInputElement, CriteriaTitleFiel
         );
 
         return (
-            <ComboBox
-                ref={ref}
-                text={text}
-                value={value || text}
-                items={results.data}
-                maxWidth={400}
-                onChange={handleSelectGoal}
-                visible={completionVisible}
-                renderInput={({ value, ref }) => (
+            <>
+                <Button
+                    type="button"
+                    view={type === 'search' ? 'primary' : 'default'}
+                    brick="right"
+                    outline
+                    iconLeft={<GoalIcon size="xs" noWrap />}
+                    onClick={() => setType((prev) => (prev === 'search' ? 'plain' : 'search'))}
+                    onMouseEnter={() => setPopupVisible(true)}
+                    onMouseLeave={() => setPopupVisible(false)}
+                    ref={btnRef}
+                />
+
+                {type === 'search' ? (
+                    <GoalSuggest
+                        value={value}
+                        onChange={onSelect}
+                        renderInput={(inputProps) => (
+                            <StyledFormInput
+                                autoFocus
+                                brick="center"
+                                name={name}
+                                onChange={onChange}
+                                placeholder={tr('Enter goal name')}
+                                onBlur={onlyUniqueTitleHandler}
+                                error={error}
+                                {...inputProps}
+                            />
+                        )}
+                    />
+                ) : (
                     <StyledFormInput
                         autoFocus
-                        error={error?.message != null ? error : undefined}
-                        placeholder={tr('Criteria or Goal')}
+                        brick="center"
+                        value={value}
                         name={name}
-                        brick="right"
-                        onChange={handleInputChange}
+                        onChange={onChange}
                         onBlur={onlyUniqueTitleHandler}
-                        value={value}
-                        ref={ref}
+                        placeholder={tr('Enter criteria')}
+                        error={error}
                     />
                 )}
-                renderItems={(children) => (
-                    <StyledTableResults columns={3}>{children as React.ReactNode}</StyledTableResults>
-                )}
-                renderItem={({ item, index, cursor, onClick }) => (
-                    <GoalSuggestItem {...item} focused={index === cursor} onClick={() => onClick(item)} key={item.id} />
-                )}
-            />
+
+                <Popup reference={btnRef} visible={popupVisible} placement="top-start">
+                    <Tip>{tr('Search by goals')}</Tip>
+                </Popup>
+            </>
         );
     },
 );
@@ -289,13 +196,10 @@ interface CriteriaFormProps {
 }
 
 export const CriteriaForm: React.FC<CriteriaFormProps> = ({ onSubmit, goalId, validityData }) => {
-    const [formVisible, toggle] = useReducer((state) => !state, false);
-    const wrapperRef = useRef<HTMLDivElement>(null);
-    const prevVisibleRef = useRef(formVisible);
-
     const {
         handleSubmit,
         control,
+        register,
         reset,
         setValue,
         setError,
@@ -311,33 +215,6 @@ export const CriteriaForm: React.FC<CriteriaFormProps> = ({ onSubmit, goalId, va
         },
     });
 
-    useEffect(() => {
-        if (!formVisible && prevVisibleRef.current !== formVisible) {
-            reset({
-                title: '',
-                weight: '',
-                goalAsGriteria: null,
-                goalId,
-            });
-        }
-
-        prevVisibleRef.current = formVisible;
-    }, [formVisible, reset, goalId]);
-
-    useEffect(() => {
-        if (isSubmitSuccessful) {
-            toggle();
-        }
-    }, [isSubmitSuccessful]);
-
-    const onClickOutside = useCallback(() => {
-        if (formVisible) {
-            toggle();
-        }
-    }, [formVisible]);
-
-    useClickOutside(wrapperRef, onClickOutside);
-
     const handleSelectGoal = useCallback(
         (goal: Goal) => {
             if (goal != null) {
@@ -348,76 +225,65 @@ export const CriteriaForm: React.FC<CriteriaFormProps> = ({ onSubmit, goalId, va
         [setValue],
     );
 
-    const [onESC] = useKeyboard(
-        [KeyCode.Escape],
-        (event) => {
-            if (event.target && wrapperRef.current?.contains(event.target as Node) && formVisible) {
-                toggle();
-            }
-        },
-        {
-            capture: true,
-            event: 'keydown',
-        },
-    );
+    const onResetHandler = useCallback(() => {
+        reset({
+            title: '',
+            weight: '',
+            goalAsGriteria: null,
+            goalId,
+        });
+    }, [goalId, reset]);
 
     return (
-        <div ref={wrapperRef}>
-            {formVisible ? (
-                <form onSubmit={handleSubmit(onSubmit)} {...onESC}>
-                    <StyledTableRow>
-                        <Controller
-                            name="title"
-                            control={control}
-                            render={({ field, fieldState }) => (
-                                <CriteriaTitleField
-                                    {...field}
-                                    error={fieldState.error}
-                                    setError={setError}
-                                    onSelect={handleSelectGoal}
-                                    titles={validityData.title}
-                                />
-                            )}
-                        />
-                        <Controller
-                            name="weight"
-                            control={control}
-                            render={({ field, fieldState }) => (
-                                <WeightField
-                                    {...field}
-                                    error={fieldState.error}
-                                    maxValue={validityData.sum}
-                                    setError={setError}
-                                />
-                            )}
-                        />
-                        <StyledSubmitButton
-                            brick="left"
-                            view="primary"
-                            text={tr('Add')}
-                            size="m"
-                            type="submit"
-                            outline
-                        />
-                    </StyledTableRow>
-                    <Controller
-                        name="goalId"
-                        control={control}
-                        render={({ field }) => <input type="hidden" {...field} />}
-                    />
-                    <Controller
-                        name="goalAsGriteria"
-                        control={control}
-                        render={({ field }) => <input type="hidden" {...field} value={field.value?.id || ''} />}
-                    />
-                </form>
-            ) : (
+        <InlineForm
+            renderTrigger={({ onClick }) => (
                 <StyledInlineTrigger
                     text={tr('Add achievement criteria')}
                     icon={<PlusIcon noWrap size="s" />}
-                    onClick={toggle}
+                    onClick={onClick}
                 />
             )}
-        </div>
+            onSubmit={handleSubmit(onSubmit)}
+            onReset={onResetHandler}
+            isSubmitted={isSubmitSuccessful}
+            tip={
+                <Tip>
+                    {tr.raw('Press key to add criteria', {
+                        key: <Keyboard key="cmd/enter" size="s" command enter />,
+                    })}
+                </Tip>
+            }
+        >
+            <StyledTableRow>
+                <Controller
+                    name="title"
+                    control={control}
+                    render={({ field, fieldState }) => (
+                        <CriteriaTitleField
+                            {...field}
+                            error={fieldState.error}
+                            setError={setError}
+                            onSelect={handleSelectGoal}
+                            titles={validityData.title}
+                        />
+                    )}
+                />
+                <Controller
+                    name="weight"
+                    control={control}
+                    render={({ field, fieldState }) => (
+                        <WeightField
+                            {...field}
+                            error={fieldState.error}
+                            maxValue={validityData.sum}
+                            setError={setError}
+                        />
+                    )}
+                />
+                <StyledSubmitButton brick="left" view="primary" text={tr('Add')} size="m" type="submit" outline />
+            </StyledTableRow>
+            <input type="hidden" {...register('goalId')} />
+            <input type="hidden" {...register('goalAsGriteria.id')} />
+        </InlineForm>
     );
 };
diff --git a/src/components/GoalCriteria/GoalCriteria.tsx b/src/components/GoalCriteria/GoalCriteria.tsx
index c5a0d375e..61c7323c3 100644
--- a/src/components/GoalCriteria/GoalCriteria.tsx
+++ b/src/components/GoalCriteria/GoalCriteria.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, memo } from 'react';
 import styled, { css } from 'styled-components';
 import { Text, CircleIcon, TickCircleIcon, MessageTickIcon, GoalIcon, nullable, CleanButton } from '@taskany/bricks';
-import { GoalAchieveCriteria, State, StateType } from '@prisma/client';
+import { State } from '@prisma/client';
 import { backgroundColor, brandColor, gray10, gray6, gray9, gray8, textColor } from '@taskany/colors';
 import NextLink from 'next/link';
 
diff --git a/src/components/GoalDependencyForm/GoalDependencyForm.tsx b/src/components/GoalDependencyForm/GoalDependencyForm.tsx
index 32da3f856..acb98a92b 100644
--- a/src/components/GoalDependencyForm/GoalDependencyForm.tsx
+++ b/src/components/GoalDependencyForm/GoalDependencyForm.tsx
@@ -107,16 +107,20 @@ export const GoalDependencyAddForm: React.FC<GoalDependencyAddFormProps> = ({ go
             onSubmit={handleSubmit(onSubmit)}
             onReset={resetFormHandler}
         >
-            <GoalSuggest value={query} onChange={handleGoalSelect}>
-                <StyledFormInput
-                    autoFocus
-                    autoComplete="off"
-                    value={query}
-                    onChange={handleInputChange}
-                    brick="right"
-                    error={errors.relation?.id}
-                />
-            </GoalSuggest>
+            <GoalSuggest
+                value={query}
+                onChange={handleGoalSelect}
+                renderInput={(inputProps) => (
+                    <StyledFormInput
+                        autoFocus
+                        autoComplete="off"
+                        onChange={handleInputChange}
+                        brick="right"
+                        error={errors.relation?.id}
+                        {...inputProps}
+                    />
+                )}
+            />
             <Button text={tr('Add')} brick="left" type="submit" view="primary" outline />
             <input type="hidden" {...register('relation.id')} />
             <input type="hidden" {...register('id')} />
diff --git a/src/components/GoalSuggest.tsx b/src/components/GoalSuggest.tsx
index d6c6c6694..847e17f73 100644
--- a/src/components/GoalSuggest.tsx
+++ b/src/components/GoalSuggest.tsx
@@ -1,11 +1,10 @@
-import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ComboBox, GoalIcon, nullable } from '@taskany/bricks';
-import { backgroundColor } from '@taskany/colors';
 import { Estimate, State as StateType } from '@prisma/client';
 
 import { trpc } from '../utils/trpcClient';
-import { ActivityByIdReturnType, GoalByIdReturnType } from '../../trpc/inferredTypes';
+import { ActivityByIdReturnType } from '../../trpc/inferredTypes';
 import { estimateToString } from '../utils/estimateToString';
 
 import { TableRow, ContentItem, TitleItem, TitleContainer, Title, TextItem, Table } from './Table';
@@ -15,14 +14,14 @@ import { UserGroup } from './UserGroup';
 const StyledTable = styled(Table)`
     display: grid;
     grid-template-columns: 35px minmax(250px, 20%) repeat(4, max-content);
-    background-color: ${backgroundColor};
-    width: fit-content;
+    padding: 0;
+    margin: 0;
 `;
 
 interface GoalSuggestProps {
-    children: React.ReactElement;
     onChange: (val: any) => void;
     value?: string;
+    renderInput: React.ComponentProps<typeof ComboBox>['renderInput'];
 }
 
 interface GoalSuggestItemProps {
@@ -33,7 +32,7 @@ interface GoalSuggestItemProps {
     state?: StateType;
     estimate?: Estimate;
     focused: boolean;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: () => void;
 }
 
 const GoalSuggestItem: React.FC<GoalSuggestItemProps> = ({
@@ -46,6 +45,7 @@ const GoalSuggestItem: React.FC<GoalSuggestItemProps> = ({
     focused,
     onClick,
 }) => {
+    const rowRef = useRef<HTMLDivElement>(null);
     const issuers = useMemo(() => {
         if (issuer && owner && owner.id === issuer.id) {
             return [owner];
@@ -55,7 +55,7 @@ const GoalSuggestItem: React.FC<GoalSuggestItemProps> = ({
     }, [issuer, owner]);
 
     return (
-        <TableRow onClick={onClick} focused={focused}>
+        <TableRow onClick={onClick} focused={focused} tabIndex={-1} ref={rowRef}>
             <ContentItem>
                 <GoalIcon size="s" />
             </ContentItem>
@@ -82,53 +82,50 @@ const GoalSuggestItem: React.FC<GoalSuggestItemProps> = ({
     );
 };
 
-export const GoalSuggest = forwardRef<HTMLDivElement, GoalSuggestProps>(({ onChange, value = '', children }, ref) => {
-    const [visible, setVisible] = useState(false);
-    const [selected, setSelected] = useState<GoalByIdReturnType | null>(null);
+export const GoalSuggest = forwardRef<HTMLDivElement, GoalSuggestProps>(
+    ({ onChange, value = '', renderInput }, ref) => {
+        const [visible, setVisible] = useState(false);
 
-    const { data: items = [] } = trpc.goal.suggestions.useQuery(
-        { input: value, limit: 5 },
-        {
-            staleTime: 0,
-            cacheTime: 0,
-        },
-    );
-
-    useEffect(() => {
-        if (items.length > 0) {
-            setVisible(true);
-        } else {
-            setVisible(false);
-        }
-    }, [items]);
+        const { data: items = [] } = trpc.goal.suggestions.useQuery(
+            { input: value, limit: 5 },
+            {
+                staleTime: 0,
+                cacheTime: 0,
+            },
+        );
 
-    useEffect(() => {
-        if (selected) {
-            onChange(selected);
-        }
-    }, [selected, onChange]);
+        useEffect(() => {
+            if (items.length > 0) {
+                setVisible(true);
+            } else {
+                setVisible(false);
+            }
+        }, [items]);
 
-    return (
-        <ComboBox
-            ref={ref}
-            onChange={setSelected}
-            items={items}
-            visible={visible}
-            renderInput={() => children}
-            renderItem={({ item, cursor, index, onClick }) => (
-                <GoalSuggestItem
-                    key={item.id}
-                    focused={cursor === index}
-                    onClick={onClick}
-                    projectId={item.projectId}
-                    title={item.title}
-                    state={item.state}
-                    issuer={item.activity}
-                    owner={item.owner}
-                    estimate={item._lastEstimate}
-                />
-            )}
-            renderItems={(children) => <StyledTable columns={6}>{children as React.ReactNode}</StyledTable>}
-        />
-    );
-});
+        return (
+            <ComboBox
+                ref={ref}
+                value={value}
+                onChange={onChange}
+                items={items}
+                visible={visible}
+                renderInput={renderInput}
+                maxWidth={400}
+                renderItem={({ item, cursor, index, onClick }) => (
+                    <GoalSuggestItem
+                        key={item.id}
+                        focused={cursor === index}
+                        onClick={onClick}
+                        projectId={item.projectId}
+                        title={item.title}
+                        state={item.state}
+                        issuer={item.activity}
+                        owner={item.owner}
+                        estimate={item._lastEstimate}
+                    />
+                )}
+                renderItems={(children) => <StyledTable columns={6}>{children as React.ReactNode}</StyledTable>}
+            />
+        );
+    },
+);
diff --git a/src/components/InlineForm.tsx b/src/components/InlineForm.tsx
index d897d66a8..27e62e976 100644
--- a/src/components/InlineForm.tsx
+++ b/src/components/InlineForm.tsx
@@ -1,5 +1,6 @@
-import { Form, KeyCode, useClickOutside, useKeyboard } from '@taskany/bricks';
-import React, { useEffect, useMemo, useReducer, useRef } from 'react';
+import { Form, KeyCode, QuestionIcon, nullable, useClickOutside, useKeyboard } from '@taskany/bricks';
+import Popup from '@taskany/bricks/components/Popup';
+import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 interface RenderTriggerProps {
@@ -10,6 +11,7 @@ interface InlineFormProps {
     renderTrigger?: (props: RenderTriggerProps) => React.ReactNode;
     onSubmit: () => void;
     children: React.ReactNode;
+    tip?: React.ReactNode;
     onReset: () => void;
     isSubmitted?: boolean;
     className?: string;
@@ -17,24 +19,36 @@ interface InlineFormProps {
 
 const StyledWrapper = styled.div`
     display: flex;
+
+    & form {
+        background-color: transparent;
+    }
 `;
 
 const StyledFormWrapper = styled.div`
     display: flex;
     flex-wrap: nowrap;
+    align-items: center;
     position: relative;
 `;
 
+const StyledQuestionIcon = styled(QuestionIcon)`
+    margin-left: 4px;
+`;
+
 export const InlineForm: React.FC<InlineFormProps> = ({
     renderTrigger,
     onSubmit,
     onReset,
     isSubmitted,
     children,
+    tip,
     className,
 }) => {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const [visible, toggle] = useReducer((state) => !state, !renderTrigger);
+    const [hintVisible, toggleHintVisible] = useState(false);
+    const hintRef = useRef<HTMLAnchorElement>(null);
     const trigger = useMemo(() => {
         if (typeof renderTrigger === 'function') {
             return renderTrigger({ onClick: toggle });
@@ -51,7 +65,7 @@ export const InlineForm: React.FC<InlineFormProps> = ({
             }
         },
         {
-            event: 'keyup',
+            capture: true,
         },
     );
 
@@ -75,11 +89,27 @@ export const InlineForm: React.FC<InlineFormProps> = ({
     }, [visible, onReset]);
 
     return (
-        <StyledWrapper ref={wrapperRef} className={className}>
+        <StyledWrapper ref={wrapperRef} className={className} {...onESC}>
             {!visible && trigger}
             {visible && (
-                <Form {...onESC} onSubmit={() => onSubmit()} submitHotkey={[KeyCode.Enter]}>
-                    <StyledFormWrapper>{children}</StyledFormWrapper>
+                <Form onSubmit={onSubmit}>
+                    <StyledFormWrapper>
+                        {children}
+                        {nullable(tip, (t) => (
+                            <>
+                                <a
+                                    ref={hintRef}
+                                    onMouseOver={() => toggleHintVisible(true)}
+                                    onMouseLeave={() => toggleHintVisible(false)}
+                                >
+                                    <StyledQuestionIcon size="s" />
+                                </a>
+                                <Popup reference={hintRef} visible={hintVisible} placement="top-end">
+                                    {t}
+                                </Popup>
+                            </>
+                        ))}
+                    </StyledFormWrapper>
                 </Form>
             )}
         </StyledWrapper>