Tooltip (Подсказка)
Виджет Tooltip предоставляет дополнительную информацию или визуальные подсказки для виджета в виде небольшого всплывающего окна.
Он появляется, когда пользователь нажимает, долго удерживает или наводит курсор на элемент.
Обычно используется для пояснения функций конкретного виджета.
Tooltip редко используется на устройствах с сенсорным управлением, где нажатие или удерживание выполняет другие действия.
Однако он очень полезен в настольных приложениях, где доступно наведение курсора.
Добавление виджета Tooltip
Чтобы добавить виджет Tooltip в приложение:
- Найдите элемент, для которого нужно добавить описание, и щёлкните по нему правой кнопкой.
Выберите Wrap Widget, затем Tooltip. - Выделите виджет Tooltip, перейдите в Properties Panel > Message > Text и введите текст, который нужно отображать во всплывающем окне.
Настройка
Виджет Tooltip можно настраивать — менять его внешний вид и поведение через Properties Panel.
Компонент в качестве Tooltip
Иногда нужно показать не только текст, но и изображения, иконки, кнопки или другие элементы.
Например, в e-commerce приложении Tooltip может показывать подробную разбивку отзывов при наведении на общую оценку.
Для этого установите свойство Tooltip Type в значение Component и выберите компонент, который нужно отображать.
Чтобы отображать динамический контент, можно создать обёртку-компонент, который принимает WidgetBuilder в качестве параметра, и использовать его внутри Tooltip.
Пример:
Изменение режима срабатывания
На устройствах с сенсорным экраном Tooltip открывается по нажатию.
Чтобы он открывался при долгом удержании, используйте свойство Trigger Mode.
Отображение Tooltip при фокусе
Параметр Show Tooltip on Focus включает отображение подсказки, когда дочерний виджет получает фокус клавиатуры.
Это важно для доступности и удобной навигации с клавиатуры, чтобы пользователи видели подсказки при переходе между элементами формы или интерфейса.
Изменение выравнивания Tooltip
По умолчанию Tooltip отображается под целевым элементом.
С помощью свойства Preferred Direction можно изменить позицию и показывать подсказку сверху, слева, справа или снизу.
Настройка размера стрелки
Изменить размер стрелки можно с помощью свойств Tail Width и Tail Length.
Изменение цвета фона
Фон Tooltip можно изменить с помощью свойства Background Color.
Смещение подсказки
Чтобы задать расстояние между Tooltip и целевым элементом, перейдите в Properties Panel > Offset и укажите нужное значение.
Скругление углов
Свойство Border Radius позволяет задать радиус скругления углов подсказки.
Добавление тени
Чтобы добавить тень и придать глубину, используйте свойство Elevation — оно делает подсказку визуально “приподнятой” и более заметной.
Внутренние отступы
Чтобы добавить пространство вокруг текста подсказки, настройте Padding в Properties Panel.
Время ожидания (Wait Duration)
Параметр Wait Duration задаёт задержку перед появлением Tooltip.
Изменить значение можно в Properties Panel > Wait Duration.
Длительность отображения (Show Duration)
Параметр Show Duration определяет, как долго Tooltip остаётся на экране.
Рекомендуется устанавливать значение 0, чтобы подсказка исчезала сразу после потери фокуса.
Изменить можно в Properties Panel > Show Duration.