如何在JavaScript时间脚本中为每行添加不同的tooltip

给每个document.write输出的文本包裹带title属性的<span>标签即可，title属性值就是对应行的tooltip悬浮说明内容，修改后的完整代码如下：

<strong class="GeneratedText">
<script type="text/javascript">
    document.write("<p>");
    var day = new Date();
    var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var d = weekday[day.getDay()];
    var hr = day.getHours();
    
    if (hr == 1 && d == "Sunday") {
        document.write('<span title="周日凌晨1点运营线路：夜间常规线">Nu: Nachtlijn</span>');
    } else if (hr == 2 && d == "Sunday") {
        document.write('<span title="周日凌晨2点运营线路：夜间常规线">Nu: Nachtlijn</span>');
    } else if (hr == 3 && d == "Sunday") {
        document.write('<span title="周日凌晨3点运营线路：夜间常规线">Nu :Nachtlijn</span>');
    } else if (hr == 4 && d == "Sunday") {
        document.write('<span title="周日凌晨4点运营线路：夜间特快">Nachtexpress</span>'); 
    } else if (hr == 5 && d == "Sunday") {
        document.write('<span title="周日凌晨5点运营线路：夜间特快">Nachtexpress</span>');
    }
</script>
</strong>

• 你可以根据实际需求修改每个<span>标签中title属性的文本，自定义对应场景的tooltip说明
• 上述方案默认调用浏览器原生tooltip效果，如果你需要自定义tooltip的样式、动画效果，可以额外增加CSS规则对带title属性的span元素做样式覆盖

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