我需要的工具提示出现在一个固定的最大宽度块。当块内的文本太长时，它应该截断文本并在最后显示三个点，您可以将鼠标悬停在它上面以查看工具提示中的所有文本。
这是我的代码来尝试做到这一点：

.new{ 
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); 
    left:25px;
        margin-top: -24px;
    opacity: 0; 
    padding: 3px 7px;
    position: absolute;
    visibility: hidden;
        width: 300px;
        display: block;             
    transition: all 0.4s ease-in-out; 
}
        
.tooltip:hover::after {
    opacity: 1; 
    visibility: visible;
}

<div class="new">
  <span class="tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit lorem, elementum ut euismod sed, lacinia et dui. Morbi accumsan metus eget elit porttitor condimentum. Sed quis consectetur eros, eu luctus velit. Proin semper tortor vel risus scelerisque, nec elementum nisl imperdiet. Proin sit amet erat pulvinar, viverra nulla eu, molestie lorem. Nam sit amet neque commodo odio fringilla tempor accumsan id tellus. In hendrerit nisi ipsum.">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit lorem, elementum ut euismod sed, lacinia et dui. Morbi accumsan metus eget elit porttitor condimentum. Sed quis consectetur eros, eu luctus velit. Proin semper tortor vel risus scelerisque, nec elementum nisl imperdiet. Proin sit amet erat pulvinar, viverra nulla eu, molestie lorem. Nam sit amet neque commodo odio fringilla tempor accumsan id tellus. In hendrerit nisi ipsum.
</span>
</div>

在我的代码中，overflow可以正常工作并截断文本，但工具提示也显示在一行中。如果我在div中关闭溢出，工具提示将完美显示，但span溢出不起作用。