CSS whitespaces turn into newline when element is outside parent

Question

So, I'm trying to make a little tooltip code for my webpage. I've been getting frustrated for the next hour or so, because this just does not want to work. When I want the tooltip to appear outside the element it's parented to, all the whitespaces in the tooltip turn into newlines.

/*css*/
*[tooltip=left]:after{
    content: attr(data-tooltip);
    padding: 10px;
    border-radius: 5px;
    background: white;
    position: absolute;
    display: block;
    max-width: 200px;
    min-height: 15px;
    word-spacing:normal;
    word-break: keep-all;
    top: 50%;
    left: calc(100% + 20px);
    transform: translateY(-50%);
    z-index: 999;
}
*[tooltip=left]:hover:before {
    content: "";
    position: absolute;
    top: 50%;
    display: inline;
    white-space: pre-line;
    transform: translateY(-50%);
    margin-left: calc(100% + 10px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ffffff transparent 
}


/*The actual text:
Saves the rendered image as a png file. Notice that the resolution is the same as the document window.*/

Answer 1

You'll notice that not all spaces are turning to newlines; most of them are, but not all. What's happening is that the tooltip pseudo-element, being absolutely positioned, is shrink-wrapping to just large enough to contain the longest word on a single line without breaking it apart (as specified by word-break: normal or word-break: keep-all). So some shorter words that can be contained on a single line are grouped without any breaks (for example, "Saves the", "image as", "a png file.").

The reason the tooltip is shrink-wrapping is because you haven't given it an explicit width (or min-width). You've given it a max-width, but absolutely positioned elements will try to be as narrow as possible, rather than as wide as possible like block-level elements in normal flow do.