Show overflow text in tooltip with wrapped text

Question

I need the tooltip to appear in a block with a fixed maximum width. When text inside the block is too long, it should truncate the text and show three dots in the end, and you can hover the mouse over it to see all text in tooltip.

This is my code to try to do this:

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

In my code, the overflow works correctly and truncates the text but the tooltip also shows in one line. If I turn off overflow in the div, the tooltip shows perfectly but the span overflow doesn't work.

Answer 1

This is happening because the tooltip is inheriting all parent styles.

Try to override the parent styles to get the result you need, for example setting the white-space property to normal for .tooltip::after.

Here is a fiddle with working example, only adding one line:

.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;
    /** added line **/
    white-space: normal; /* <---- here */
}
        
.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>