|
1 |
| -Тултип (tooltip) — подсказка, которая появляется при наведении указателя или при фокусе на элемент интерфейса. В тултипе не может быть интерактивных элементов. |
| 1 | +Тултип (tooltip) — подсказка, которая появляется при наведении указателя или при фокусе на элемент интерфейса. |
| 2 | +В тултипе не может быть интерактивных элементов. |
2 | 3 |
|
3 | 4 | ### Когда использовать
|
4 | 5 |
|
5 | 6 | - Для коротких поясняющих текстов об элементах интерфейса.
|
6 | 7 | - Для вывода подписей к иконкам, рядом с которыми нет текста со значением.
|
7 |
| -- Если текст не помещается в отведенном месте и обрезается многоточием (например, в колонках таблицы). В этом случае в тултипе выводится полный текст. |
| 8 | +- Если текст не помещается в отведенном месте и обрезается многоточием (например, в колонках таблицы). В этом случае |
| 9 | + в тултипе выводится полный текст. |
8 | 10 | - Если нужно показать подсказку с заголовками, списками, таблицей и т. д.
|
9 | 11 |
|
10 | 12 | ### Структура компонента
|
11 | 13 |
|
12 | 14 | #### Вариации
|
13 | 15 |
|
14 |
| -Нестандартный тултип всегда предпочтительнее системного. Не используйте системный и нестандартный тултип в одном интерфейсе. |
| 16 | +Нестандартный тултип всегда предпочтительнее системного. Не используйте системный и нестандартный тултип в одном интерфейсе. |
15 | 17 |
|
16 | 18 | ##### Простой
|
17 | 19 |
|
|
34 | 36 |
|
35 | 37 | <!-- example(tooltip-multiple-lines) -->
|
36 | 38 |
|
37 |
| -Иногда удобнее, если текст в тултипе не переносится, а написан в одну строку, например при сравнении хеш-сумм, выводе адресов электронной почты или путей к файлам и папкам. Для подобных случаев максимальную ширину тултипа можно не устанавливать: |
| 39 | +Иногда удобнее, если текст в тултипе не переносится, а написан в одну строку, например при сравнении хеш-сумм, |
| 40 | +выводе адресов электронной почты или путей к файлам и папкам. Для подобных случаев максимальную ширину тултипа можно |
| 41 | +не устанавливать: |
38 | 42 |
|
39 | 43 | <!-- example(tooltip-long) -->
|
40 | 44 |
|
|
44 | 48 | - Указатель-дятел
|
45 | 49 | - Шапка (необязательно)
|
46 | 50 |
|
47 |
| -Не используйте интерактивные элементы (кнопки, ссылки и пр.) в сложном тултипе, пользоваться ими, как правило, просто невозможно. Если нужно использовать интерактивные элементы, возьмите [поповер](/components/popover). |
| 51 | +Не используйте интерактивные элементы (кнопки, ссылки и пр.) в сложном тултипе, пользоваться ими, как правило, просто |
| 52 | +невозможно. Если нужно использовать интерактивные элементы, возьмите [поповер](/components/popover). |
48 | 53 |
|
49 | 54 | <div style="margin-top: 5px;">
|
50 | 55 | <img src="./assets/images/tooltip/tooltip-hard__structure.jpg" alt="tooltip hard structure"/>
|
51 | 56 | </div>
|
52 | 57 |
|
53 | 58 | ##### Размеры
|
54 | 59 |
|
55 |
| -В отличие от простого тултипа, сложный имеет фиксированную ширину. Чтобы оптимально использовать пространство, полезно заложить несколько вариантов ширины. |
| 60 | +В отличие от простого тултипа, сложный имеет фиксированную ширину. Чтобы оптимально использовать пространство, |
| 61 | +полезно заложить несколько вариантов ширины. |
56 | 62 |
|
57 |
| -Высота тултипа зависит от контента. Рекомендуемая максимальная высота — 480px (может быть увеличена по усмотрению дизайнера). |
| 63 | +Высота тултипа зависит от контента. Рекомендуемая максимальная высота — 480px (может быть увеличена |
| 64 | +по усмотрению дизайнера). |
58 | 65 |
|
59 | 66 | ### Описание работы
|
60 | 67 |
|
|
91 | 98 |
|
92 | 99 | #### По краю элемента
|
93 | 100 |
|
94 |
| -Край тултипа выравнивается по краю триггерного элемента, указатель на фиксированном расстоянии от края тултипа. Если элемент слишком маленький, указатель выравнивается по центру элемента. |
| 101 | +Край тултипа выравнивается по краю триггерного элемента, указатель на фиксированном расстоянии от края тултипа. |
| 102 | +Если элемент слишком маленький, указатель выравнивается по центру элемента. |
95 | 103 |
|
96 | 104 | <!-- example(tooltip-placement-edges) -->
|
97 | 105 |
|
98 | 106 | **Динамическое выравнивание**
|
99 | 107 |
|
100 |
| -Если для тултипа не хватает места, он попытается перейти в другое положение. Например, из положения «снизу в центре» в положение «сверху в центре». |
| 108 | +Если для тултипа не хватает места, он попытается перейти в другое положение. Например, из положения «снизу в центре» |
| 109 | +в положение «сверху в центре». |
101 | 110 |
|
102 | 111 | ### Стилизация тултипов
|
103 | 112 |
|
104 | 113 | #### Простой тултип
|
105 | 114 |
|
106 | 115 | Для светлой темы используется темный тултип. Для темной темы используется светлый тултип.
|
107 | 116 |
|
108 |
| -Для предупреждений используется отдельный вид тултипов. Например, он появляется при попытке ввода запрещенного символа в поле (подробнее см. [Валидация](/other/validation)) |
| 117 | +Для предупреждений используется отдельный вид тултипов. Например, он появляется при попытке ввода запрещенного символа |
| 118 | +в поле (подробнее см. [Валидация](/other/validation)) |
109 | 119 |
|
110 | 120 | <!-- example(tooltip-overview) -->
|
111 | 121 |
|
|
129 | 139 |
|
130 | 140 | [Дропдаун](/components/dropdown) — кнопка-меню, открывающая список доступных действий.
|
131 | 141 |
|
132 |
| -[Поповер](/components/popover) — небольшой немодальный диалог без затемнения, который открывается рядом с триггерным элементом. Он может содержать текст, поля ввода, любые элементы управления. |
| 142 | +[Поповер](/components/popover) — небольшой немодальный диалог без затемнения, который открывается рядом с триггерным |
| 143 | +элементом. Он может содержать текст, поля ввода, любые элементы управления. |
0 commit comments