feat: 移除移动端的站点卡片悬停提示功能
This commit is contained in:
117
src/script.js
117
src/script.js
@@ -2138,8 +2138,20 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Tooltip functionality for truncated text
|
// Tooltip functionality for truncated text(仅桌面端/支持悬停设备启用)
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const hoverMedia =
|
||||||
|
window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)');
|
||||||
|
|
||||||
|
if (!hoverMedia) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let cleanupTooltip = null;
|
||||||
|
|
||||||
|
function enableTooltip() {
|
||||||
|
if (cleanupTooltip) return;
|
||||||
|
|
||||||
// Create tooltip element
|
// Create tooltip element
|
||||||
const tooltip = document.createElement('div');
|
const tooltip = document.createElement('div');
|
||||||
tooltip.className = 'custom-tooltip';
|
tooltip.className = 'custom-tooltip';
|
||||||
@@ -2147,39 +2159,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
let activeElement = null;
|
let activeElement = null;
|
||||||
|
|
||||||
// Show tooltip on hover
|
|
||||||
document.addEventListener('mouseover', (e) => {
|
|
||||||
const target = e.target.closest('[data-tooltip]');
|
|
||||||
if (target) {
|
|
||||||
const tooltipText = target.getAttribute('data-tooltip');
|
|
||||||
if (tooltipText) {
|
|
||||||
activeElement = target;
|
|
||||||
tooltip.textContent = tooltipText;
|
|
||||||
tooltip.classList.add('visible');
|
|
||||||
updateTooltipPosition(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Move tooltip with cursor
|
|
||||||
document.addEventListener('mousemove', (e) => {
|
|
||||||
if (activeElement) {
|
|
||||||
updateTooltipPosition(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hide tooltip on mouse out
|
|
||||||
document.addEventListener('mouseout', (e) => {
|
|
||||||
const target = e.target.closest('[data-tooltip]');
|
|
||||||
if (target && target === activeElement) {
|
|
||||||
// Check if we really left the element (not just went to a child)
|
|
||||||
if (!target.contains(e.relatedTarget)) {
|
|
||||||
activeElement = null;
|
|
||||||
tooltip.classList.remove('visible');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateTooltipPosition(e) {
|
function updateTooltipPosition(e) {
|
||||||
// Position tooltip 15px below/right of cursor
|
// Position tooltip 15px below/right of cursor
|
||||||
const x = e.clientX + 15;
|
const x = e.clientX + 15;
|
||||||
@@ -2206,4 +2185,74 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
tooltip.style.left = finalX + 'px';
|
tooltip.style.left = finalX + 'px';
|
||||||
tooltip.style.top = finalY + 'px';
|
tooltip.style.top = finalY + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Show tooltip on hover
|
||||||
|
function onMouseOver(e) {
|
||||||
|
const target = e.target.closest('[data-tooltip]');
|
||||||
|
if (!target) return;
|
||||||
|
|
||||||
|
const tooltipText = target.getAttribute('data-tooltip');
|
||||||
|
if (!tooltipText) return;
|
||||||
|
|
||||||
|
activeElement = target;
|
||||||
|
tooltip.textContent = tooltipText;
|
||||||
|
tooltip.classList.add('visible');
|
||||||
|
updateTooltipPosition(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Move tooltip with cursor
|
||||||
|
function onMouseMove(e) {
|
||||||
|
if (!activeElement) return;
|
||||||
|
updateTooltipPosition(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide tooltip on mouse out
|
||||||
|
function onMouseOut(e) {
|
||||||
|
const target = e.target.closest('[data-tooltip]');
|
||||||
|
if (!target || target !== activeElement) return;
|
||||||
|
|
||||||
|
// Check if we really left the element (not just went to a child)
|
||||||
|
if (target.contains(e.relatedTarget)) return;
|
||||||
|
|
||||||
|
activeElement = null;
|
||||||
|
tooltip.classList.remove('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mouseover', onMouseOver);
|
||||||
|
document.addEventListener('mousemove', onMouseMove);
|
||||||
|
document.addEventListener('mouseout', onMouseOut);
|
||||||
|
|
||||||
|
cleanupTooltip = () => {
|
||||||
|
document.removeEventListener('mouseover', onMouseOver);
|
||||||
|
document.removeEventListener('mousemove', onMouseMove);
|
||||||
|
document.removeEventListener('mouseout', onMouseOut);
|
||||||
|
|
||||||
|
activeElement = null;
|
||||||
|
tooltip.classList.remove('visible');
|
||||||
|
tooltip.remove();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function disableTooltip() {
|
||||||
|
if (!cleanupTooltip) return;
|
||||||
|
cleanupTooltip();
|
||||||
|
cleanupTooltip = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncTooltipEnabled() {
|
||||||
|
if (hoverMedia.matches) {
|
||||||
|
enableTooltip();
|
||||||
|
} else {
|
||||||
|
disableTooltip();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
syncTooltipEnabled();
|
||||||
|
|
||||||
|
// 兼容旧版 Safari:addListener/removeListener
|
||||||
|
if (hoverMedia.addEventListener) {
|
||||||
|
hoverMedia.addEventListener('change', syncTooltipEnabled);
|
||||||
|
} else if (hoverMedia.addListener) {
|
||||||
|
hoverMedia.addListener(syncTooltipEnabled);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user