Prevent new line after every word in span - html

Question

We are using some code to make a tooltip appear while hovering over text or an icon. Using a transform we are then able to center the tooltip, no matter what size it is, so we can have the size scale with the content of the tooltip: http://jsfiddle.net/z8wxdjzu/4/
.position-me {
margin: 10%;
}
.abbr {
position: relative;
}
.tooltip {
background: orange;
display: none;
text-align: center;
max-width: 100px;
padding: 3px;
position: absolute;
top: 20px;
left: 50%;
right: auto;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0%);
}
.abbr:hover .tooltip {
display: inline-block;
}
<div class="position-me">
<span class="abbr">
Text
<span class="tooltip">Lorem ipsum dolor sit amet.</span>
</span>
</div>
The problem is that even when providing a larger maximum width, a new line is added in the tooltip after every word. Instead we want the tooltip to fill the entire width (provided with max-width) before moving to a second line.
We don't want to set a fixed width, because some tooltips are rather short and we don't want a lot of empty space in the tooltip. How can we prevent the line breaks from happening?
EDIT: The max-width is actually important, since some of the tooltips are long enough to span several lines, so just removing it and using a whitespace: nowrap is going to be insufficient, unless we do manual line breaks, which I'd rather prevent.

Answer 1

The problem is that your tooltip span wants to have it's width be less or equal to the parent's width, in this case the span.abbr.
So to fix it we can add another div around the tooltip that is a bit larger but outside the flow of the other text, and it works.
Edit: I edited the snippet to center the tooltip. I also left in the red background for the surrounding div to show the trick that I apply here.
Example snippet:
.position-me {
margin: 10%;
}
.abbr {
position: relative;
}
.abbr div {
position: absolute;
top: 0;
left: 50%;
background-color: red;
width: 200px;
height: 2px;
}
.tooltip {
background: orange;
display: none;
text-align: center;
max-width: 100px;
padding: 3px;
position: absolute;
top: 20px;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.abbr:hover .tooltip {
display: inline-block;
}
<div class="position-me">
Bla bla bla
<span class="abbr">
HOVER ME
<div><span class="tooltip">Lorem ipsum dolor sit amet.</span>
</div></span>
some more text here.
</div>

Answer 2

Here the fixed fiddle: Fiddle
You need to remove position:absolute and then add width:auto on .tooltip class and add display:inline-block; to .abbr:hover .tooltip

Answer 3

You can't prevent breaking (which you can do) without losing the max-width.
Just adding white-space:nowrap will stop the text breaking but will cause overflow of the span. So remove the max-width and all is good.
.position-me {
margin: 10%;
}
.abbr {
position: relative;
}
.tooltip {
background: orange;
/*display: none; */
/* disabled for demo */
text-align: center;
white-space: nowrap;
padding: 3px;
position: absolute;
top: 20px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.abbr:hover .tooltip {
display: block;
}
<div class="position-me"> <span class="abbr">
Text
<span class="tooltip">Lorem ipsum dolor sit amet.</span>
</span>
</div>

Answer 4

i changed your css file this way and it worked !
.position-me {
margin: 10%;
}
.abbr {
//position: relative;//notice here
}
.tooltip {
background: orange;
display: none;
text-align: center;
//max-width: 100px;
padding: 3px;
position: absolute;
top: 20px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-100%, 200%);//notice here !!!
}
.abbr:hover .tooltip {
display: block;
}

Answer 5

.position-me {
margin: 10%;
}
.abbr {
position: relative;
}
.tooltip {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
border-radius: 4px;
display:none;
}
.abbr:hover .tooltip {
display:block;
}
<div class="position-me"> <span class="abbr">
Text
<span class="tooltip">Lorem ipsum dolor sit amet. rerterte rtertertert</span>
</span>
</div>
This should be the solution: http://jsfiddle.net/z8wxdjzu/7/