CSS3: Tooltip div Höhe nach oben erhöhen

Question

Ich habe einen Text mit Text-Überlauf: Ellipse. Wenn ich über Text schwebe, bekomme ich ein Tooltip-Div mit dem ganzen Text.

Wenn Text zu groß ist, wird die Tooltip-div-Höhe nach unten statt nach oben erhöht.

.added_caption_div { 
 
    position: relative; 
 
    top: 50px; 
 
} 
 

 
.added_caption_div span { 
 
    display: inline-block; 
 
    text-overflow: ellipsis; 
 
    overflow-x: hidden; 
 
    white-space: nowrap; 
 
    width: 180px; 
 
    max-width: 190px; 
 
} 
 

 
.added_caption_div .caption_tooltip_div { 
 
    position: absolute; 
 
    top: -40px; 
 
    width: 185px; 
 
    height: auto; 
 
    padding: 5px; 
 
    background: rgba(0, 0, 0, 0.9); 
 
    border-radius: 2px; 
 
    color: #FFFFFF; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.added_caption_div .caption_tooltip_div:after { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 10%; 
 
    width: 0; 
 
    border-top: 5px solid #000; 
 
    border-top: 5px solid rgba(51, 51, 51, 0.9); 
 
    border-right: 5px solid transparent; 
 
    border-left: 5px solid transparent; 
 
    content: " "; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 

 
.added_caption_div:hover .caption_tooltip_div { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: all 0.5s ease-in; 
 
}

<div class="added_caption_div"> 
 
    <span>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</span> 
 
    <div class="caption_tooltip_div text-center">Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</div> 
 
</div>

Jede mögliche Hilfe würde groß sein.

Vielen Dank.

Answer 1

statt top: -40px; geben bottom: 100%;

.added_caption_div .caption_tooltip_div { 
    bottom: 100%; 
} 

Answer 2

.added_caption_div { 
 
    position: relative; 
 
    top: 0px; 
 
} 
 

 
.added_caption_div span { 
 
    display: inline-block; 
 
    text-overflow: ellipsis; 
 
    overflow-x: hidden; 
 
    white-space: nowrap; 
 
    width: 180px; 
 
    max-width: 190px; 
 
} 
 

 
.added_caption_div .caption_tooltip_div { 
 
    position: absolute; 
 
    top: -105px; 
 
    width: 185px; 
 
    height: auto; 
 
    padding: 5px; 
 
    background: rgba(0, 0, 0, 0.9); 
 
    border-radius: 2px; 
 
    color: #FFFFFF; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.added_caption_div .caption_tooltip_div:after { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 10%; 
 
    width: 0; 
 
    border-top: 5px solid #000; 
 
    border-top: 5px solid rgba(51, 51, 51, 0.9); 
 
    border-right: 5px solid transparent; 
 
    border-left: 5px solid transparent; 
 
    content: " "; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 

 

 
.added_caption_div:hover span{ 
 
top:35px; 
 
position:absolute; 
 
} 
 
.added_caption_div:hover{ 
 
top:100px; 
 
} 
 
.added_caption_div:hover .caption_tooltip_div { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: all 0.5s ease-in; 
 
}

<div class="added_caption_div"> 
 
    <span>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</span> 
 
    <div class="caption_tooltip_div text-center">Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</div> 
 
</div>