Оповещения

Описание компонента Tooltip

Tooltip — это всплывающая подсказка, которая появляется при наведении на элемент. Она используется для предоставления дополнительной информации или пояснений к элементу интерфейса. В данном случае компонент реализован с использованием HTML и CSS, поддерживает различные варианты отображения (с указателем, без указателя, с разным расположением текста и указателя).

Классы и их назначение

Класс Назначение
.sf-tooltip Основной контейнер для тултипа.
.sf-tooltip--target Элемент, при наведении на который появляется тултип (например, иконка "help").
.sf-tooltip--text Контейнер для текста тултипа.
.sf-tooltip--pointer Класс для добавления указателя (стрелки) к тултипу.
.sf-tooltip--text-bottom Позиционирует текст тултипа снизу от целевого элемента.
.sf-tooltip--text-right Позиционирует текст тултипа справа от целевого элемента.
.sf-tooltip--text-left Позиционирует текст тултипа слева от целевого элемента.
.sf-tooltip--pointer-bottom Указывает, что стрелка тултипа направлена вниз.
.sf-tooltip--pointer-right Указывает, что стрелка тултипа направлена вправо.
.sf-tooltip--pointer-left Указывает, что стрелка тултипа направлена влево.
.sf-tooltip--pointer--top-left Указывает, что стрелка тултипа направлена вверх и смещена влево.
.sf-tooltip--pointer--top-right Указывает, что стрелка тултипа направлена вверх и смещена вправо.
.sf-tooltip--title Заголовок внутри тултипа.
.sf-tooltip--title-norm Заголовок с нормальным (не жирным) начертанием.
.shadow-1, .shadow-2 Классы для добавления теней к тултипу.

Переменные CSS и их значения по умолчанию

Переменная Значение по умолчанию Описание
--sf-tooltip--border-radius var(--sf-a5) Радиус скругления углов тултипа.
--sf-tooltip-text--height var(--sf-c6) Высота текстового контейнера тултипа.
--sf-tooltip-text--width var(--sf-e5) Ширина текстового контейнера тултипа.
--sf-tooltip-text--background-color var(--sf-surface-2) Цвет фона текстового контейнера тултипа.
--sf-tooltip-text--color var(--sf-on-surface) Цвет текста внутри тултипа.
--sf-tooltip-text--font-size var(--sf-text--size-1/3) Размер шрифта текста внутри тултипа.
--sf-tooltip-text--line-height var(--sf-text--height-1/3) Высота строки текста внутри тултипа.
--sf-tooltip--transform translate(-50%, -100%) Трансформация для позиционирования тултипа над целевым элементом.
--sf-tooltip--left 50% Позиционирование тултипа по горизонтали (по умолчанию по центру).
--sf-tooltip--top 0% Позиционирование тултипа по вертикали (по умолчанию сверху).
--sf-tooltip--pointer-bottom var(--sf-b0) Позиционирование указателя (стрелки) снизу.
--sf-tooltip--pointer-left 50% Позиционирование указателя (стрелки) по горизонтали.
--sf-tooltip--pointer-margin-left var(--sf-a5) Отступ указателя (стрелки) по горизонтали.
--sf-tooltip--pointer-border-color var(--sf-surface-2) transparent transparent transparent Цвет границы указателя (стрелки).

Примеры использования

Обычный tooltip:

help
This is a tooltip
                    
<div class="sf-tooltip"> 
    <i class="sf-icon sf-icon-thin sf-tooltip--target">help</i>  
    <div class="sf-tooltip--text shadow-1" style="--text: 'test';"><span class="sf-tooltip--title">This is a tooltip</span></div>
</div>

tooltip с указателем:

help
This is a tooltip
               
<div class="sf-tooltip">       
    <i class="sf-icon sf-icon-thin sf-tooltip--target">help</i>
    <div class="sf-tooltip--text sf-tooltip--pointer shadow-1" style="--text: 'test';"><span class="sf-tooltip--title">This is a tooltip</span>>/div<
</div>

tooltip с указателем слева:

help
This is a tooltip
                    
<div class="sf-tooltip">       
    <i class="sf-icon sf-icon-thin sf-tooltip--target">help</i>
    <div class="sf-tooltip--text sf-tooltip--pointer shadow-1 sf-tooltip--pointer--top-left" style="--text: 'test';"><span class="sf-tooltip--title">This is a tooltip</span>>/div<
</div>

tooltip с указателем справа:

help
This is a tooltip
                    
<div class="sf-tooltip">       
    <i class="sf-icon sf-icon-thin sf-tooltip--target">help</i>
    <div class="sf-tooltip--text sf-tooltip--pointer shadow-1 sf-tooltip--pointer--top-right" style="--text: 'test';"><span class="sf-tooltip--title">This is a tooltip</span>>/div<
</div>

Нижний tooltip с указателем:

help
This is a tooltip
                    
<div class="sf-tooltip">       
    <i class="sf-icon sf-icon-thin sf-tooltip--target">help</i>
    <div class="sf-tooltip--text sf-tooltip--text-botoom sf-tooltip--pointer sf-tooltip--pointer-bottom shadow-2" style="--text: 'test';"><span class="sf-tooltip--title">This is a tooltip</span>>/div<
</div>

tooltip с указателем, расположенный справа:

help
This is a tooltip
                    
<div class="sf-tooltip">       
    <i class="sf-icon sf-icon-thin sf-tooltip--target">help</i>
    <div class="sf-tooltip--text sf-tooltip--text-right sf-tooltip--pointer sf-tooltip--pointer-right shadow-2" style="--text: 'test';"><span class="sf-tooltip--title">This is a tooltip</span>>/div<
</div>

tooltip с указателем, расположенный слева:

help
This is a tooltip
                    
<div class="sf-tooltip">       
    <i class="sf-icon sf-icon-thin sf-tooltip--target">help</i>
    <div class="sf-tooltip--text sf-tooltip--text-left sf-tooltip--pointer sf-tooltip--pointer-left shadow-2" style="--text: 'test';"><span class="sf-tooltip--title">This is a tooltip</span≶>/div<
</div>

tooltip с большим текстовым блоком:

help
This is a tooltip Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text. 
                    
<div class="sf-tooltip">       
    <i class="sf-icon sf-icon-thin sf-tooltip--target">help</i>
    <div class="sf-tooltip--text sf-tooltip--text-big sf-tooltip--pointer shadow-1" style="--text: 'test';"><span class="sf-tooltip--title">This is a tooltip</span≶<span>
    Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.
    </span>>/div<
</div>
Пример Описание
<div class="sf-tooltip--text shadow-1">...</div> Тултип с тенью уровня 1.
<div class="sf-tooltip--text sf-tooltip--pointer shadow-1">...</div> Тултип с указателем и тенью уровня 1.
<div class="sf-tooltip--text sf-tooltip--pointer--top-left shadow-1">...</div> Тултип с указателем, смещенным влево, и тенью уровня 1.
<div class="sf-tooltip--text sf-tooltip--text-bottom sf-tooltip--pointer-bottom shadow-2">...</div> Тултип снизу с указателем вниз и тенью уровня 2.
<div class="sf-tooltip--text sf-tooltip--text-right sf-tooltip--pointer-right shadow-2">...</div> Тултип справа с указателем вправо и тенью уровня 2.

Примечания

  • Показ тултипа: Тултип появляется при наведении на элемент с классом .sf-tooltip--target благодаря CSS-правилу: 
    .sf-tooltip:hover .sf-tooltip--text {
    visibility: visible;
    opacity: 1;
}
  • Кастомизация: Все параметры тултипа (цвета, размеры, позиционирование) настраиваются через CSS-переменные, что делает компонент гибким и легко адаптируемым под разные дизайны.
  • Тени: Классы .shadow-1 и .shadow-2 добавляют тени к тултипу для визуального выделения.

Изменить статью