Hint
Отображает значок с подсказкой
Используется для отображения подсказки при наведении указателя мыши на значок или обрезанный текст с м ноготочием.
<Hint Value='Замечательный хинт!' />
Свойства
| Имя | Описание | Тип | Значение по умолчанию | Возможные значения |
|---|---|---|---|---|
| Badge | Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет) | any | ||
| CSS | Массив строк-классов CSS-стилей компонента | array | ||
| CombineConfig | Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную | object | ||
| Hidden | Признак состояния компонента Скрыт | boolean | False | |
| Hint | Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста | any | ||
| Id | Идентификатор компонента для навигации к нему на HTML-странице | string | ||
| OnClick | Обработчик события нажатия кнопки мыши | undefined | ||
| OnKeyDown | Обработчик события KeyDown | undefined | ||
| OnKeyUp | Обработчик события KeyUp | undefined | ||
| OnMouseDown | Обработчик события MouseDown | undefined | ||
| OnMouseEnter | Обработчик события MouseEnter | undefined | ||
| OnMouseLeave | Обработчик события MouseLeave | undefined | ||
| OnMouseMove | Обработчик события MouseMove | undefined | ||
| OnMouseOut | Обработчик события MouseOut | undefined | ||
| OnMouseOver | Обработчик события MouseOver | undefined | ||
| OnMouseUp | Обработчик события MouseUp | undefined | ||
| OnUnmount | Обработчик события Unmount | undefined | ||
| Position | Сторона объекта, с которой отображается подсказка | string | right | |
| Slot | Метка для динамического добавления другого компонента по его идентификатору | string | ||
| Tooltip | Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка | any | ||
| TraceId | Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента | string | ||
| Value | Текст подсказки | string | ||
| Visible | Признак инверсии состояния компонента Скрыт | boolean | True |
Примеры
JSX:
<Group Mode="Column" CSS={['px-16']}>
<Group Mode="Column" CSS={['mb-84']}>
<Text Mode="Medium_32" Value="Hint 1.0" CSS={['mb-24']} />
<Group Width="400" Mode="Row"><Text Value="Подсказка пользователю при наведении на специальную иконку или обрезанный текст по многоточию" /></Group>
</Group>
<Group Mode="Column">
<Text Mode="Medium_20" Value="Функционал" CSS={['mb-24']} />
<Group Width="400" Mode="Row" CSS={['mb-100']}>
<Icon Size="Small" Name="check" Color="VIOLET_5" CSS={['mr-8']} />
<Text Value="Подсказка или пояснение пользователю." />
</Group>
</Group>
<Group Mode="Column" Height="auto">
<Text Mode="Medium_20" Value="Виды" CSS={['mb-36']} />
<Group>
<Group Mode="Column" CSS={['mb-184']}>
<Group Mode="Column" CSS={['mb-76']}>
<Group>
<Text Mode="Medium_18" Value="Icon" CSS={['mb-24']} />
</Group>
<Group>
<Text Value="Используется, как пояснение пользователю, иконка располагается рядом с лейблом." />
</Group>
</Group>
<Group Mode="Column">
<Group>
<Text Mode="Medium_18" Value="Dots" CSS={['mb-24']} />
</Group>
<Group>
<Text Value="Используется во многих компонентах, когда текст обрезается по многоточию, при наведении показывается полный текст." />
</Group>
</Group>
</Group>
<Group Mode="Column">
<Group Mode="Column" CSS={['pt-48']}>
<Group>
<Text Mode="Medium_18" Value="" />
</Group>
<Group>
<Hint Position="right" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
</Group>
<Group Mode="Column" CSS={['pt-136']}>
<Group>
<Text Mode="Medium_18" Value="" />
</Group>
<Group>
<Select
Disabled={true}
HighlightError={true}
Error={true}
ErrorMessage="Максимальная длина ошибки две строки, если же длиннее и сократить ее нельзя, то обрезаем через многоточие и показываем Hint."
Label=""
Model-var="dotsMessage"
KeyField="id"
ValueField="value"
State={[]}
ItemAlias="item"
>
<Group Slot="ItemTemplate" Mode="Wrap">
<Group CSS={["mb-4"]}>
<Text Mode="Regular_14_2" Color="MAIN_9" Value-var="item.value" />
</Group>
<Group>
<Text Mode="Regular_12" Color="GRAY_7" Value-var="item.fileSize" />
<Text Mode="Regular_12" Color="GRAY_7" Value-var="item.fileUploadedAt" CSS={["pl-4"]}/>
</Group>
</Group>
</Select>
</Group>
</Group>
</Group>
</Group>
</Group>
<Group Mode="Column" Height="auto">
<Group>
<Text Mode="Medium_20" Value="Состояния" CSS={['mb-24']} />
</Group>
<Group Mode="Row">
<Group Mode="Column">
<Text Mode="Medium_18" Value="Side" CSS={['mb-24']} />
<Group Mode="Row" Height='auto' CSS={['mb-16']}>
<Text Value="right" />
<Hint Position="right" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
<Group Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки справа от элемента." CSS={['mt-16', 'mb-48']} /></Group>
<Group Mode="Row" Height='auto' CSS={['mb-16']}>
<Text Value="left" />
<Hint Position="left" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
<Group Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки слева от элемента." CSS={['mt-16', 'mb-48']} /></Group>
</Group>
<Group Mode="Column">
<Text Mode="Medium_18" Value="Below" CSS={['mb-24']} />
<Group Mode="Row" Height='auto' CSS={['mb-16']}>
<Text Value="bottomLeft" />
<Hint Position="bottomLeft" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
<Group Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки снизу-слева от элемента." CSS={['mt-16', 'mb-48']} /></Group>
<Group Mode="Row" Height='auto' CSS={['mb-16']}>
<Text Value="bottomRight" />
<Hint Position="bottomRight" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
<Group CSS={['mb-20']} Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки снизу-справа от элемента." CSS={['mt-16', 'mb-48']} /></Group>
<Group Mode="Row" Height='auto' CSS={['mb-16']}>
<Text Value="bottom" />
<Hint Position="bottom" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
<Group Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки снизу-по центру от элемента." CSS={['mt-16', 'mb-48']} /></Group>
</Group>
<Group Mode="Column">
<Text Mode="Medium_18" Value="Above" CSS={['mb-24']} />
<Group Mode="Row" Height='auto' CSS={['mb-16']}>
<Text Value="topLeft" />
<Hint Position="topLeft" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
<Group Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки сверху-слева от элемента." CSS={['mt-16', 'mb-48']} /></Group>
<Group Mode="Row" Height='auto' CSS={['mb-16']}>
<Text Value="topRight" />
<Hint Position="topRight" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
<Group Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки сверху-справа от элемента." CSS={['mt-16', 'mb-48']} /></Group>
<Group Mode="Row" Height='auto' CSS={['mb-16']}>
<Text Value="top" />
<Hint Position="top" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
</Group>
<Group Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки сверху-по центру от элемента." CSS={['mt-16', 'mb-48']} /></Group>
</Group>
</Group>
</Group>
</Group>