:hover:after css tooltip and white-space issue

Question

the scenario is described here:

 .mainbox{ width:150px; } .container{ overflow-x: auto; white-space: nowrap; } .position1{ display: inline-block; width: 50px; height: 50px; margin: 2px; padding: 2px; background-color: #B6DEFC; border: 1px solid; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-color: #A8A8A8; position: relative; font-size: xx-small; cursor: pointer; white-space: normal; } .position1:hover:after{ position: absolute; width: 100px; content: attr(data-title); border: 1px solid #FF0000; padding: 15px 5px 10px 5px; background: #FF9999; border-radius:5px; z-index: 1000; font-size: small; } 

 <div class="mainbox"> <div class="container"> <div class="position1" data-title="My data-title1"></div> <div class="position1" data-title="My data-title2"></div> <div class="position1" data-title="My data-title3"></div> <div class="position1" data-title="My data-title4"></div> </div> </div> 

I'd like the tooltip (:hover:after) to show up out of the container and the mainbox . I think it's a white-space issue...

Can someone help me in solving this?

thank you in advance...

Answer 1

try

.position1:hover, .position1:after{
    position: absolute;
    width: 100px;
    content: attr(data-title);
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;

}

Answer 2

update:

You can try solution like this, remove position:relative from .position1 , then apply this rule ( position:relative ) to .mainbox , in this case the tooltips will be relative to the element which is outside of the element with rule overflow-x:hidden and will be visible. I have update also the code, run it again

there is no problem with white space, the container set as overflow:hidden you can't show the tooltips out of the container

 .mainbox{ width:150px; position:relative; } .container{ overflow-x: auto; white-space: nowrap; } .position1{ display: inline-block; width: 50px; height: 50px; margin: 2px; padding: 2px; background-color: #B6DEFC; border: 1px solid; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-color: #A8A8A8; /*position: relative;*/ font-size: xx-small; cursor: pointer; white-space: normal; } .position1:hover:after{ position: absolute; width: 100px; content: attr(data-title); border: 1px solid #FF0000; padding: 15px 5px 10px 5px; background: #FF9999; border-radius:5px; z-index: 1000; font-size: small; } 

 <div class="mainbox"> <div class="container"> <div class="position1" data-title="My data-title1"></div> <div class="position1" data-title="My data-title2"></div> <div class="position1" data-title="My data-title3"></div> <div class="position1" data-title="My data-title4"></div> </div> </div> 

Answer 3

Now i understand what exactly you want after seeing the image.

You just change position absolute to fixed in .position1:hover:after class and here is the updated fiddle.

.mainbox{
    width:250px;
    position:relative;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px;
    padding: 2px;
    background-color: #B6DEFC;
    border: 1px solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-color: #A8A8A8;
    position: relative;
    font-size: xx-small;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}
.position1:hover:after{
    content: attr(data-title);
    position: fixed;
    width: 100px;
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;
}
.number{
    position:relative;
    float:right;
    padding:1px;   
}
.name{
    display:inline-block;
    width: 45px;
    height: 41px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;   
}
.date{
    bottom: 0;
    left: 1px;
    right: 1px;
    position:absolute;
}

Answer 4

Ok, sarhov... even I don't like the "effect" (I mean, look at box 3 and 4, and its tooltip: they show up very far from the box)... I can't "touch" the relative positioning in position1 class.

the reason is the following...I compleate the code above with this...

I need to put labels in the boxes like these:

<!--  HTML -->
<div class="mainbox">
<div class="container">
    <div class="position1" data-title="My data-title1">
        <span class="number">1</span>
        <span class="name">Name 1</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title2">
        <span class="number">2</span>
        <span class="name">Name 2</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title3">
        <span class="number">3</span>
        <span class="name">Name 3</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title4">
        <span class="number">4</span>
        <span class="name">Name 4</span>
        <span class="date">2014/10/03</span>
    </div>
</div>
</div>

<!-- CSS -->
.mainbox{
    width:150px;
    position:relative;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px;
    padding: 2px;
    background-color: #B6DEFC;
    border: 1px solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-color: #A8A8A8;
    position: relative;
    font-size: xx-small;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}
.position1:hover:after{
    content: attr(data-title);
    position: absolute;
    width: 100px;
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;
}
.number{
    position:relative;
    float:right;
    padding:1px;   
}
.name{
    display:inline-block;
    width: 45px;
    height: 41px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;   
}
.date{
    bottom: 0;
    left: 1px;
    right: 1px;
    position:absolute;
}

Fiddle

suggestions?

Ps: the code is generated server-side (it's a C#/.net WebApp)