Prevent words from cutting off into a new line

Question

I'm wanting to prevent each word within the hover element from cutting off into a new line.

Here's a JSBin of the issue.

It's also vital that the alignment of the tooltip is central to the hover element, and that the hover element is the width of however long the string of text becomes (no set width). How may I do this?

[data-tooltip]:hover {
    position:relative;
}
[data-tooltip]:hover:after {
    margin-top:7px;
    padding:8px;
    content:attr(data-tooltip);
    text-align:center;
    color:#fff;
    border-radius:3px;
    background:rgba(0, 0, 0, .8);
}
[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
    position:absolute;
    top:100%;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%)
}
[data-tooltip]:hover:before {
    margin-top:2px;
    content:'';
    border-right:6px solid transparent;
    border-bottom:6px solid rgba(0, 0, 0, .8);
    border-left:6px solid transparent;
}

<span data-tooltip="boo">boo</span>
<span data-tooltip="boo boo">boo</span>
<span data-tooltip="boo boo boo">boo</span>
<span data-tooltip="boo boo boo boo">boo</span>
<span data-tooltip="boo boo boo boo">boo</span>
<span data-tooltip="boo boo boo boo boo">boo</span>

Answer 1

Add white-space: nowrap; to the tooltip element:

[data-tooltip]:hover:after {
    white-space: nowrap;
}

Answer 2

Use the css:

white-space: nowrap;