Границы и тени

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

.custom-tooltip {
    border: 2px solid #3498db;
    border-radius: 8px;
}

Применение темы к Tooltipster:

$('.tooltip-element').tooltipster({
    content: 'Пример подсказки с границей',
    theme: 'custom-tooltip'
});
  • border — задает толщину и цвет рамки.
  • border-radius — позволяет скруглить углы, создавая более современный вид.
  • theme — связывает CSS-класс с конкретной подсказкой, облегчая управление стилями нескольких элементов на странице.

Добавление теней

Тени усиливают визуальное отделение подсказки от остального контента. Tooltipster поддерживает тени через CSS-свойство box-shadow.

.custom-tooltip-shadow {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

Использование тени вместе с Tooltipster:

$('.tooltip-element').tooltipster({
    content: 'Подсказка с тенью',
    theme: 'custom-tooltip-shadow'
});

  • box-shadow:

    • Первый параметр — смещение по оси X.
    • Второй параметр — смещение по оси Y.
    • Третий параметр — радиус размытия.
    • Четвертый параметр — цвет и прозрачность тени.

Комбинация границ и теней

Можно объединять границы и тени для создания объемных подсказок. Рекомендуется использовать отдельные классы CSS для каждого визуального эффекта или объединять их в единую тему:

.tooltip-border-shadow {
    border: 1px solid #2ecc71;
    border-radius: 6px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    padding: 10px;
}
$('.tooltip-element').tooltipster({
    content: 'Объёмная подсказка',
    theme: 'tooltip-border-shadow'
});
  • Скругленные границы в сочетании с мягкой тенью создают ощущение глубины.
  • Правильный padding предотвращает наложение текста на рамку и тень.

Вариативность теней для разных положений

Tooltipster позволяет изменять позицию подсказки относительно элемента, и иногда требуется адаптировать тени под положение:

$('.tooltip-element').tooltipster({
    content: 'Подсказка с динамической тенью',
    theme: 'tooltip-border-shadow',
    side: 'top'
});

Для каждой позиции (top, bottom, left, right) тень можно корректировать через CSS, используя псевдоклассы:

.tooltipster-base.tooltipster-top {
    box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}

.tooltipster-base.tooltipster-bottom {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

Анимация теней и границ

Tooltipster поддерживает анимацию появления подсказок. Можно дополнительно анимировать тени и границы для эффекта плавного появления:

.tooltip-border-shadow {
    border: 1px solid #2ecc71;
    border-radius: 6px;
    box-shadow: 0 6px 15px rgba(0,0,0,0);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.tooltipster-show {
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    border-color: #27ae60;
}
  • transition задает плавное изменение свойств при появлении и исчезновении подсказки.
  • Анимация тени создает ощущение «всплытия» подсказки над элементом.

Динамическое изменение стилей через JavaScript

Tooltipster предоставляет методы для изменения контента и темы на лету, что позволяет менять границы и тени динамически:

var instance = $('.tooltip-element').tooltipster().tooltipster('instance');

instance.content('Новая подсказка');
instance.option('theme', 'tooltip-border-shadow');
  • Метод instance.option() позволяет менять тему без перезагрузки страницы.
  • Можно комбинировать разные темы для различных состояний элемента.

Практические рекомендации

  • Для аккуратного внешнего вида подсказки рекомендуется использовать тонкие рамки и мягкие тени.
  • Скругленные углы повышают читаемость и делают подсказку визуально легкой.
  • Анимация тени и цвета границы усиливает восприятие интерактивности.
  • Поддержка разных положений требует корректировки теней через CSS.

Гибкая настройка границ и теней в Tooltipster позволяет создавать подсказки, которые не только информируют, но и органично вписываются в дизайн страницы.

Оглавление