MT系统译后编辑工具：JSP页面悬停词义Tooltip与HashMap集成问题

我来帮你搞定这个Tooltip和HashMap的集成问题！其实思路很清晰，咱们分后端数据准备、前端渲染和交互逻辑三步来实现：

首先你需要把词汇-释义的映射数据传到JSP页面里，可以在Servlet或者JSP脚本块里初始化并存储这个HashMap：

<%
// 初始化词汇映射，实际项目里可以从数据库/配置文件加载
HashMap<String, String> vocabMap = new HashMap<>();
vocabMap.put("machine translation", "机器翻译");
vocabMap.put("post-editing", "译后编辑");
vocabMap.put("tooltip", "提示框");
// 将Map存入request域，供前端页面访问
request.setAttribute("vocabMap", vocabMap);
%>

接下来要把源文本中的目标词汇标记出来，给每个词汇添加触发Tooltip的属性，把对应的释义存在自定义数据属性里：

<%
String sourceText = "We are building a post-editing tool for machine translation systems.";
// 这里用简单空格拆分词汇，实际场景建议用专业分词工具处理短语匹配
String[] words = sourceText.split(" ");
for (String word : words) {
    // 清理词汇中的标点，避免匹配错误
    String cleanWord = word.replaceAll("[^a-zA-Z0-9]", "").toLowerCase();
    // 从Map中获取释义，无匹配时显示默认文本
    String translation = vocabMap.getOrDefault(cleanWord, "无可用释义");
%>
    <span class="vocab-tooltip" data-translation="<%= translation %>"><%= word %></span>
<%
}
%>

用原生JavaScript处理悬停事件，完成Tooltip的显示和隐藏，同时加上基础样式让提示框更友好：

<style>
/* 词汇元素样式，提示用户可交互 */
.vocab-tooltip {
    position: relative;
    cursor: help;
    text-decoration: underline dotted #666;
}

/* Tooltip基础样式 */
.tooltip-content {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2c3e50;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    display: none;
    z-index: 1000;
}

/* 给Tooltip添加小三角箭头 */
.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带Tooltip触发的词汇元素
    const tooltipElements = document.querySelectorAll('.vocab-tooltip');
    
    tooltipElements.forEach(el => {
        // 创建Tooltip容器元素
        const tooltip = document.createElement('div');
        tooltip.className = 'tooltip-content';
        tooltip.textContent = el.dataset.translation;
        el.appendChild(tooltip);
        
        // 鼠标悬停时显示Tooltip
        el.addEventListener('mouseover', function() {
            tooltip.style.display = 'block';
        });
        
        // 鼠标离开时隐藏Tooltip
        el.addEventListener('mouseout', function() {
            tooltip.style.display = 'none';
        });
    });
});
</script>

• 短语匹配优化：示例用了简单的单词拆分，实际MT场景建议先做短语匹配（比如识别"machine translation"这类固定短语），可以用字符串匹配算法或专业分词库实现。
• 数据加载优化：如果词汇量很大，不要在JSP中硬编码，建议从数据库、配置文件（如JSON/Properties）或后端接口异步加载。
• 样式定制：可以根据系统风格调整Tooltip的颜色、位置、动画效果，比如添加淡入淡出的过渡动画。

这样一套流程下来，就能把HashMap中的释义数据和Tooltip功能完美集成啦！

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