使用JavaScript实现的Tooltip函数无法正常工作问题排查

1. 修复JavaScript语法错误 #

你的showTooltip函数末尾多了一个冗余的闭合大括号，这会导致JavaScript解析失败，函数无法正常定义，进而无法触发tooltip的显示逻辑。

修正后的JavaScript代码：

function showTooltip(elementId) {
    console.log('Showing tooltip for element:', elementId);
    const tooltip = document.getElementById(`tooltip-${elementId}`);
    tooltip.style.display = 'block';
}

function hideTooltip(elementId) {
    console.log('Hiding tooltip for element:', elementId);
    const tooltip = document.getElementById(`tooltip-${elementId}`);
    tooltip.style.display = 'none';
}

2. 确保Tooltip初始状态为隐藏 #

如果没有给.tooltip类设置初始隐藏样式，tooltip可能默认处于显示状态，导致鼠标交互效果不明显。添加基础CSS样式：

.tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 8px;
    font-size: 14px;
}

完整可运行代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .tooltip {
            display: none;
            position: absolute;
            background-color: #333;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            margin-top: 8px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        <label for="username">Username:</label>
        <input type="text" id="login-username" name="username" onmouseover="showTooltip('login-username')" onmouseout="hideTooltip('login-username')">
        <div id="tooltip-login-username" class="tooltip">Your username for login.</div>
    </div>

    <script>
        function showTooltip(elementId) {
            console.log('Showing tooltip for element:', elementId);
            const tooltip = document.getElementById(`tooltip-${elementId}`);
            tooltip.style.display = 'block';
        }

        function hideTooltip(elementId) {
            console.log('Hiding tooltip for element:', elementId);
            const tooltip = document.getElementById(`tooltip-${elementId}`);
            tooltip.style.display = 'none';
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Einat Barak