我創建了一個彈出窗口，當我點擊一個按鈕時它就會出現，它會停留10秒鐘或者直到用戶點擊其他地方。

Javascript:

<script type="text/javascript">
     function show_popup_function(id) {
        var popup = document.getElementById(id);
        popup.classList.toggle("show");
     
        let timeout;
     
        function hide() {
            popup.classList.remove("show");
            document.removeEventListener('mousedown', hide);
            clearTimeout(timeout)
        }
        document.addEventListener('mousedown', hide)
        timeout = setTimeout(hide, 10000)
     }
  </script>

div:

<div id="loading-overlay" style="display: none;">
     <div id="loader" style="display: none;"></div>
  </div>

CSS:

.popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
        

.popup .popuptext {
      visibility: hidden;
      width: 600px; /* Increase the width to accommodate multiple lines */
      max-width: 600px;
      background-color: #555;
      color: #fff;
      text-align: left; /* Align the text to the left */
      border-radius: 6px;
      padding: 8px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%); /* Center the popup horizontally */
      white-space: pre-line;
    }
    
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
      white-space: pre-line;
    }
    
    .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
    }
    @-webkit-keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

必須單擊才能看到彈出窗口的范圍:

<div>
                 <div class="popup" onclick="show_popup_function('C1686551567729')">click here to view and copy to clipboard<span class="popuptext" id="C1686551567729">NA</span></div>
              </div>

span文本(將在彈出窗口中顯示)來自一個帶有換行符的DB，如& ltbr & gt

這里的文本是多行的，每行的長度是不同的。需要的是，彈出窗口的寬度應該足以容納最長的行。

問題是，對于小文本，它是這樣顯示的:

彈出箭頭位于中心，可啟用滾動條:

它應該顯示如下內容:

要使多行文本正確顯示在工具提示中并覆蓋span左上角的區域，您可以修改CSS和JavaScript代碼，如下所示:

function show_popup_function(id) {
  var popup = document.getElementById(id);
  popup.classList.toggle("show");

  let timeout;

  function hide() {
    popup.classList.remove("show");
    document.removeEventListener("mousedown", hide);
    clearTimeout(timeout);
  }
  document.addEventListener("mousedown", hide);
  timeout = setTimeout(hide, 10000);
}

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup .popuptext {
  visibility: hidden;
  width: 400px; /* Increase the width to accommodate multiple lines */
  max-width: 100%;
  background-color: #555;
  color: #fff;
  text-align: left; /* Align the text to the left */
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%); /* Center the popup horizontally */
  white-space: pre-line;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  white-space: pre-line;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
  <div class="popup" onclick="show_popup_function('C1686551567729')">
    click here to view and copy to clipboard
    <span class="popuptext" id="C1686551567729">
      Line 1 of text
      Line 2 of text
      Line 3 of text
      Line 4 of text
      Line 5 of text
      ...
    </span>
  </div>
</div>