Компонент Tooltip в WordPress — это React-компонент, предназначенный для отображения всплывающих подсказок с текстом, которые появляются при наведении курсора на элемент или при его фокусировке. Если позиция подсказки выходит за пределы окна, она автоматически изменит своё положение, чтобы оставаться видимой.
Основные Принципы Использования
Tooltip используется для вывода вспомогательного текста, который появляется при наведении курсора или при фокусировке на элементе, к которому он прикреплен. Это делает интерфейс более удобным, позволяя пользователю получить дополнительную информацию о элементе без перегрузки интерфейса.
Пример Базового Использования
Для начала импортируем компонент Tooltip из библиотеки WordPress:
import { Tooltip } from '@wordpress/components';
const MyTooltipExample = () => (
<Tooltip text="Наведите для информации">
<button>Наведите сюда</button>
</Tooltip>
);
В этом примере компонент Tooltip отображает текст «Наведите для информации» при наведении на кнопку «Наведите сюда».
Вложенные Подсказки (Nested Tooltips)
Если один или несколько компонентов Tooltip вложены в другой Tooltip, то будет отображена только подсказка, связанная с самым внешним компонентом Tooltip. Остальные вложенные Tooltip не будут отображаться и просто передадут свой якорный элемент без вывода подсказки.
Поддерживаемые Свойства (Props)
Компонент Tooltip принимает несколько параметров для настройки отображения и поведения подсказок. Рассмотрим их подробнее:
1. children
- Тип:
React.ReactElement - Описание: Элемент, к которому прикреплена подсказка. Поддерживается только один дочерний элемент.
- Обязательное: Да
<Tooltip text="Дополнительная информация">
<span>Наведи курсор сюда</span>
</Tooltip>
2. text
- Тип:
string - Описание: Текст, отображаемый в подсказке при наведении или фокусировке на элементе.
- Обязательное: Нет
<Tooltip text="Информация о кнопке">
<button>Кнопка</button>
</Tooltip>
3. delay
- Тип:
number - Описание: Задержка перед показом подсказки в миллисекундах.
- Обязательное: Нет
- Значение по умолчанию:
700
<Tooltip text="Появится через 1 секунду" delay={1000}>
<button>Задержка 1 секунда</button>
</Tooltip>
4. hideOnClick
- Тип:
boolean - Описание: Указывает, следует ли скрыть подсказку при клике на элемент.
- Обязательное: Нет
- Значение по умолчанию:
true
<Tooltip text="Закроется при клике" hideOnClick={true}>
<button>Кликните на меня</button>
</Tooltip>
5. placement
- Тип:
'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' - Описание: Определяет расположение подсказки относительно элемента.
- Обязательное: Нет
- Значение по умолчанию:
'bottom'
<Tooltip text="Справа от элемента" placement="right">
<button>Справа</button>
</Tooltip>
6. position
Примечание: Используйте
placement, когда это возможно.position— это устаревший метод для указания положения.
- Тип:
string - Описание: Устаревший способ указания положения подсказки. Поддерживает
top,middle,bottomдля оси y иleft,center,rightдля оси x. - Обязательное: Нет
- Значение по умолчанию:
'bottom'
<Tooltip text="Устаревший способ позиционирования" position="top left">
<button>Устаревшее позиционирование</button>
</Tooltip>
7. shortcut
- Тип:
string | object - Описание: Добавляет текст с клавишами быстрого доступа. Если передана строка, используется как текст. Если передан объект, то он принимает свойства
display(текст) иariaLabel(описание для доступа). - Обязательное: Нет
<Tooltip text="Сочетание клавиш" shortcut={{ display: 'Ctrl + S', ariaLabel: 'Сохранить' }}>
<button>Сохранить</button>
</Tooltip>
Полный Пример: Tooltip с Разными Параметрами
В следующем примере используется несколько компонентов Tooltip с разными параметрами для демонстрации различных вариантов отображения и настроек.
import { Tooltip } from '@wordpress/components';
const AdvancedTooltipExample = () => (
<div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
<Tooltip text="Информация" delay={500}>
<button>С задержкой 500ms</button>
</Tooltip>
<Tooltip text="Подсказка справа" placement="right">
<span>Расположен справа</span>
</Tooltip>
<Tooltip text="Нажмите для скрытия" hideOnClick={true}>
<button>Скрыть при клике</button>
</Tooltip>
<Tooltip text="Подсказка с шорткатом" shortcut="Ctrl + H">
<button>Клавиши Ctrl + H</button>
</Tooltip>
</div>
);
export default AdvancedTooltipExample;
Заключение
Компонент Tooltip позволяет улучшить пользовательский интерфейс, делая его более понятным и удобным для пользователя. Используя различные параметры, можно точно настроить отображение подсказки в зависимости от контекста и требований интерфейса.