javascript 如何在CSS/JS中设置工具提示的相对位置？

我知道有很多类似的问题，但我不能得到它的工作，希望你能帮助我。
我有一个嵌套的项目列表。大部分是简单的href，但有些是链接，应该调用复制到剪贴板功能，并显示一个成功的消息作为跨度后。
消息应该显示在链接的上方并居中。在高分辨率的桌面上没有问题。在移动设备上，不幸的是显示跨度会占用空间并移动hrefs+位置在任何地方，但不在上方和中间。

使用data-tooltip类模板对我不起作用，因为它们通常使用"悬停"，在我的例子中，跨度应该只在点击链接后显示，不应该弄乱其他元素。

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);
  }
}

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 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>

作为次要选项（通过模态）：HTML：2行代码。CSS：额外7行代码. JS：额外10行代码。只需要得到JS复制到剪贴板链接起来。

<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>

.modal {
  display: none;
  position: fixed;
  padding-top: 25%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #eff;
  text-align:center;
  margin: 0 auto;
  padding: 3px;
  width: calc(100% / 5);
}
@media (max-width: 500px) { .modal-content { width: 6em; }}

var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
  modal.style.display = "block";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

javascript 如何在CSS/JS中设置工具提示的相对位置？

1条答案

相关问题

热门标签

最新问答