如何在CSS/JS中设置点击触发Tooltip的相对定位？移动端适配问题

我遇到了嵌套列表内的复制提示问题：列表中多数是普通链接，部分链接点击后会调用copy-to-clipboard函数，随后通过span显示「Copied!」成功提示。该提示需显示在链接上方且居中，高分辨率桌面端显示正常，但移动端显示时，span会占用空间导致链接移位，位置完全不符合预期。试过基于hover触发的data-tooltip类模板，但不符合我点击后显示且不干扰其他元素的需求。

初始代码 #

JavaScript #

function CopyToClipboard(id) {
  // do copy stuff here
  // [...]

  // showing tooltip
  var span_element = document.getElementById(id).parentElement.querySelector('span');
  if(span_element != null) {
    span_element.style.display = "inline";
    setTimeout( function() {
      span_element.style.display = "none";
    }, 2000);
  }
}

CSS #

body {
  margin-left: 0px;
}

ul {
  padding-left: 20px;
}

div.container {
  margin: 10px;
  width: 98%;
  word-break: break-all;
}

.custom-tooltip {
  padding: 4px;
  background-color: grey;
  color: #fff;
  position: relative;
  bottom: 2em;
  right: 5em;
  display: none;
}

HTML #

<html lang="de" class=" heujtnrdy idc0_345">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.90">
    <link rel="stylesheet" href="index_tmp.css">
    <script type="text/javascript" src="index_tmp.js"></script>
  </head>
  <body>
    <div class="container">
      <ul>
        <li>
          <span>Layer 1</span>
          <ul>
            <li>
              <span>Layer 2</span>
              <ul>
                <li>
                  <span>Layer 3</span>
                  <ul>
                    <li>
                      <div>
                        <table>
                          <tr>
                            <td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
                          </tr>
                        </table>
                      </div>
                    </li>
                    <li>
                      <div>
                        <table>
                          <tr>
                            <td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
                          </tr>
                        </table>
                      </div>
                    </li>
                    <li>
                      <div>
                        <table>
                          <tr>
                            <td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
                          </tr>
                        </table>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

2023年2月5日更新：基于granite修改的替代CSS方案 #

.modal {
  display: none;
  position: fixed;
  padding-top: 50%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  text-align: center;
  justify-content: center;
}

.modal-content {
  background-color: grey;
  border: 0.5px solid grey;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.0em;
  font-family: monospace;
  font-weight: 700;
  bottom: 1em !important;
  position: fixed;
}

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