Question

I created a little Tooltip thats in a Container. So there a two divs both with position: absolute;. They have to be position absolute or otherwise they will mess up the whole design.

.container_1 {
     position: absolute;
     top: 20px;
     left: 20px;
}

.container_2 {
     position: absolute;
}

<div class="container_1"><div class="container_2">Full Name-Name</div></div>

I also have a CSS Triangle in the first container so that’s why there are two containers.

In the Tooltip there is shown the Full Name of a user. But now I have the problem that the div isn’t as wide as the content. So I fixed it through replacing space with   but now there is the same problem with dash’s. But the problem doesn’t get fixed by replacing the dash with –. Anybody knows a solution?

Answer 1

CSS:

.container_1 {
    position: absolute;
    top: 20px;
    left: 20px;
}

.container_2 {
    position: absolute;
    width: 95px;
    overflow: hidden;
    white-space: nowrap;
}

http://jsfiddle.net/yG5eF/

Edit: Sorry, totally misread it the first time.