document.addEventListener('DOMContentLoaded', function() { // Создаем стили для тултипов const tooltipStyles = ` .player-row { position: relative; } .player-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 15px; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); padding: 15px; min-width: 250px; z-index: 1000; display: none; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.2); animation: tooltipFadeIn 0.2s ease-out; } .player-row:hover .player-tooltip { display: block; } @keyframes tooltipFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .tooltip-content { display: flex; gap: 15px; align-items: center; } .tooltip-image { width: 70px; height: 70px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border: 3px solid white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .tooltip-image img { width: 100%; height: 100%; object-fit: cover; } .tooltip-info { flex: 1; } .tooltip-name { font-weight: 700; color: #1f2937; margin: 0 0 5px 0; font-size: 16px; } .tooltip-details { color: #6b7280; font-size: 13px; margin: 0 0 3px 0; display: flex; align-items: center; gap: 8px; } .tooltip-number { background: #4f46e5; color: white; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-block; } .lineup-container.away .tooltip-number { background: #ef4444; } .tooltip-position { color: #9ca3af; font-size: 12px; } /* Стрелочка тултипа */ .player-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: white transparent transparent transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)); } /* Адаптивность для мобильных */ @media (max-width: 768px) { .player-tooltip { min-width: 200px; padding: 12px; margin-bottom: 10px; } .tooltip-image { width: 50px; height: 50px; } .tooltip-name { font-size: 14px; } .tooltip-details { font-size: 11px; } } `; // Добавляем стили в head const styleSheet = document.createElement('style'); styleSheet.textContent = tooltipStyles; document.head.appendChild(styleSheet); // Функция для создания тултипа function createTooltip(playerData) { const tooltip = document.createElement('div'); tooltip.className = 'player-tooltip'; // Определяем цвет фона для номера в зависимости от команды const isHome = playerData.row.closest('.lineup-container.home') !== null; const numberClass = isHome ? 'tooltip-number' : 'tooltip-number'; tooltip.innerHTML = ` `; return tooltip; } // Добавляем тултипы ко всем строкам игроков document.querySelectorAll('.player-row').forEach(row => { // Получаем данные из data-атрибутов const playerData = { name: row.dataset.playerName || 'Unknown Player', number: row.dataset.playerNumber || '?', position: row.dataset.playerPosition || 'Unknown', thumb: row.dataset.playerThumb || 'https://via.placeholder.com/150x150?text=No+Photo', row: row }; // Создаем и добавляем тултип const tooltip = createTooltip(playerData); row.appendChild(tooltip); // Добавляем обработчик ошибки загрузки изображения const img = tooltip.querySelector('img'); if (img) { img.addEventListener('error', function() { this.src = 'https://via.placeholder.com/150x150?text=No+Photo'; }); } }); });

Санкт-Паули - РБ Лейпциг

О нас

О футболе