Hint

Отображает значок с подсказкой

Используется для отображения подсказки при наведении указателя мыши на значок или обрезанный текст с многоточием.

  <Hint Value='Замечательный хинт!' />

Свойства

Имя	Описание	Тип	Значение по умолчанию
CSS	Массив строк-классов CSS-стилей компонента	array
Hidden	Признак состояния компонента Скрыт	boolean
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
OnClick	Обработчик события Click	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="Row">
    <Group Mode="Column">
      <Text Mode="Medium_20" Value="Side" CSS={['mb-24']} />
      <Group Mode="Row" Height='auto' CSS={['mb-16']}>
        <Text Value="Label" />
        <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="Label" />
        <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_20" Value="Below" CSS={['mb-24']} />
      <Group Mode="Row" Height='auto' CSS={['mb-16']}>
        <Text Value="Label" />
        <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="Label" />
        <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="Label" />
        <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_20" Value="Above" CSS={['mb-24']} />
      <Group Mode="Row" Height='auto' CSS={['mb-16']}>
        <Text Value="Label" />
        <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="Label" />
        <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="Label" />
        <Hint Position="top" Value="Пояснение или подсказка пользователю при наведении на иконку рядом с лейблом." />
      </Group>
      <Group Height="auto" Width="180px"><Text Mode="Regular_14_2" Value="Появление подсказки сверху-по центру от элемента." CSS={['mt-16', 'mb-48']} /></Group>
    </Group>
  </Group>

Свойства​

Примеры​

Свойства

Примеры