Epub中的弹注

技术交流与词典编修
12

问了ChatGPT，最后采用如下HTML+CSS方案：

HTML:

<span class="tipnote"><span class="zhushi">註</span><span class="tipntext" epub:type="noteref">（兆民：众多人民。兆，旧言万亿为兆，极言众多。）</span></span>

CSS:

.tipnote {
    position: relative;
    border-bottom: 1px dotted black;
}

.tipnote .tipntext {
    visibility: hidden;

  /* Position the tipnote */
    position: absolute;
    z-index: 1;
}

.tipnote:hover .tipntext {
    visibility: visible;
    font-family: STKai, "MKai PRC", Kai,"楷体"; 
    font-size: 0.9em;
    white-space: nowrap;
    background-color:#629fd1;
    color: white;
    display: inline-block;
    text-indent: 0;
}

.zhushi {
    vertical-align: super;
    font-size: 0.7em;
    font-weight: bold;
    background-color: #fff;
    color: red;
    border-radius: 6px;
}