Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
$(document).ready(function() {
// Инициализация боковой панели
$('.боковая-панель-кнопка').on('click', function() {
var targetId = $(this).data('target');
// Удаляем активный класс у всех кнопок
$('.боковая-панель-кнопка').removeClass('active');
// Добавляем активный класс текущей кнопке
$(this).addClass('active');
// Скрываем все разделы
$('.боковая-панель-раздел').removeClass('default');
// Показываем выбранный раздел
$('#' + targetId).addClass('default');
});
// Активируем первую кнопку по умолчанию
$('.боковая-панель-кнопка:first').click();
// Подключаем Tippy.js через CDN динамически
if (!window.tippy) {
var tippyScript = document.createElement('script');
tippyScript.src = "https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js";
tippyScript.onload = function() {
var tippyCoreScript = document.createElement('script');
tippyCoreScript.src = "https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js";
tippyCoreScript.onload = initTippy;
document.head.appendChild(tippyCoreScript);
};
document.head.appendChild(tippyScript);
// Подключаем CSS
var tippyCSS = document.createElement('link');
tippyCSS.rel = "stylesheet";
tippyCSS.href = "https://unpkg.com/tippy.js@6/dist/tippy.css";
document.head.appendChild(tippyCSS);
} else {
initTippy();
}
// Инициализация Tippy после загрузки скриптов
function initTippy() {
$('.допуск-контейнер').each(function() {
var content = $(this).find('.допуск-подсказка').html(); // берем содержимое подсказки
tippy(this, {
content: content,
allowHTML: true,
interactive: true,
placement: 'auto', // автоматический выбор позиции
maxWidth: '80vw', // responsive
minHeight: 'auto',
theme: 'dark', // темная тема
arrow: true, // без стрелки
duration: [200, 200], // плавное появление/исчезание
popperOptions: {
modifiers: [
{
name: 'preventOverflow',
options: {
padding: 8, // отступ от краев экрана
},
},
{
name: 'flip',
options: {
fallbackPlacements: ['top', 'bottom', 'right', 'left'],
},
},
],
},
});
});
}
});