Tooltip

Tooltip показывает пояснение в маленьком окошке — при наведении курсора, нажатии или долгом нажатии. Обычно так объясняют, что делает кнопка или значок.

инфо

На сенсорных экранах подсказки применяют редко: нажатие и долгое нажатие там обычно заняты другими действиями. А вот на десктопе, где есть наведение, они на своём месте.

tooltip.png

Как добавить

  1. Щёлкните правой кнопкой по виджету, которому нужна подсказка, выберите Wrap Widget и затем Tooltip.
  2. Выделите Tooltip и введите текст в Properties Panel > Message > Text.

Настройки

Внешний вид и поведение задаются в панели свойств.

Компонент вместо текста

Иногда подсказке мало текста: нужны картинка, значки, кнопки. Например, при наведении на общий рейтинг товара показать разбивку отзывов по звёздам.

Для этого установите Tooltip Type в Component и выберите нужный компонент.

Чтобы содержимое подсказки менялось, соберите компонент-обёртку, принимающий WidgetBuilder параметром, и используйте его внутри подсказки.

Как это делается:

Способ вызова

На сенсорных экранах подсказка открывается по касанию. Свойство Trigger Mode переключает её на долгое нажатие.

Подсказка по фокусу

Переключатель Show Tooltip on Focus показывает подсказку, когда вложенный виджет получает фокус с клавиатуры. Это важно для доступности: человек, идущий по форме клавишей Tab, увидит пояснение так же, как тот, кто наводит мышь.

tooltip-on-focus

Направление

По умолчанию подсказка появляется под виджетом. Свойство Preferred Direction позволяет открыть её Above, Left или Right.

Хвостик

Размер хвостика подсказки задают свойства Tail Width и Tail Length.

Цвет фона

Задаётся свойством Background Color.

tooltip-bckgrnd.png

Отступ от виджета

Расстояние между подсказкой и виджетом задаётся свойством Offset в панели свойств.

tooltip-offset.png

Скругление углов

Свойство Border Radius в панели свойств.

radius.png

Тень

Свойство Elevation добавляет тень: подсказка приподнимается над интерфейсом и становится заметнее.

elevate-tooltip.png

Внутренние отступы

Пространство вокруг текста подсказки задаётся свойством Padding.

internal-padding.png

Задержка перед показом

Wait Duration — сколько подсказка ждёт, прежде чем появиться.

Задержка перед скрытием

Show Duration — сколько подсказка держится на экране после того, как курсор с виджета ушёл. Обычно её ставят в ноль, чтобы подсказка исчезала сразу.

перевод официальной документации FlutterFlow

обновлено

ESC