How to make text expand div to the top

Question

I have three div's and the "show info" item inside each of them. When user hovering with mouse on the "show info" item he can see some text with additional information that appears above "show info" item. But the additional information in different div's can have different text length. Some information can be short and some long... well that makes a problem that text expand the size of div that wrap the information to the bottom and because of this it covers the "info" item. You can clearly understand the problem in my example when hovering the second div "show info"(subject 2). The main goal is to make text expand size of its wrapper to the top, and not cover the "show info" item.

JSFIDDLE EXAMPLE LINK

$(function(){
 $('.hoverinfo').mouseover(function(){
  $(this).prepend('<div class="info"></div>');
  $('.info').html($(this).attr("data-info"));
  $('.info').fadeIn();
 }).mouseleave(function(){
  $('.info').remove();
 });
});

.subject{
  width:400px;
  height:100px;
  background:lightblue;
}
.subject:nth-of-type(2){
  background:lightgrey;
}
.subject:nth-of-type(3){
  background:lightgreen;
}
.info {
  position:absolute;
  color:black;
  width: 200px;
  background-color:lightcyan;
  border: solid 2px black;
  text-align: center;
  margin-top: -30px;
  display: none;
}
.hoverinfo {
  background:pink;
  float:right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="subject">
 <div class="hoverinfo" data-info="The text from subject 1 - OK!">show info(hover it)</div>
 <span>subject 1</span>
</div>
<div class="subject">
 <div class="hoverinfo" data-info="There is more text inside and this is a problem because text expand div to the bottom - PROBLEM!">show info(HOVER IT)</div>
 <span>subject 2 - here is a problem</span>
</div>
<div class="subject">
 <div class="hoverinfo" data-info="The text from subject 3 - OK">show info (hover it)</div>
 <span>subject 3</span>
</div>

you might try changing the css to min-width for the info class as opposed to a set width of 200 px. Of course if your text is extremely long it might still cover the element you're hovering over. I think there is a jQuery method to anchor the bottom of a div to an element... you just want to make sure it's not too close to the top of the page. — Shockwave, Feb 24 '16 at 19:51
you can try trimming text ? http://stackoverflow.com/questions/13550127/word-limiter-in-jquery-cut-off-at-nearest-space-after-xx-chars-and-add-rea — solimanware, Feb 24 '16 at 19:53

score 3 · Accepted Answer · answered Feb 24 '16 at 20:56

You don't need JQuery to do this...just a CSS transform.

JSFiddle Demo

.hoverinfo {
    background:pink;
    float:right;
    position: relative; /* positioning context */
}

.info {
    position:absolute;
    color:black;
    width: 200px;
    background-color:lightcyan;
    border: solid 2px black;
    text-align: center;
    top:0;   /* position at top */
    transform:translateY(-100%); /* shift up by own height */
    margin-top: -10px; /* spacing for a little extra spice */
    display: none;
}

$(function(){
 $('.hoverinfo').mouseover(function(){
  $(this).prepend('<div class="info"></div>');
  $('.info').html($(this).attr("data-info"));
  $('.info').fadeIn();
 }).mouseleave(function(){
  $('.info').remove();
 });
});

.subject{
 width:400px;
 height:100px;
 background:lightblue;
}
.subject:nth-of-type(2){
  background:lightgrey;
}
.subject:nth-of-type(3){
  background:lightgreen;
}
.info {
 position:absolute;
 color:black;
 width: 200px;
 background-color:lightcyan;
 border: solid 2px black;
 text-align: center;
 top:0;
    transform:translateY(-100%);
    margin-top: -10px;
 display: none;
}
.hoverinfo {
 background:pink;
 float:right;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="subject">
 <div class="hoverinfo" data-info="The text from subject 1 - OK!">show info(hover it)</div>
 <span>subject 1</span>
</div>
<div class="subject">
 <div class="hoverinfo" data-info="There is more text inside and this is a problem because text expand div to the bottom - PROBLEM!">show info(HOVER IT)</div>
 <span>subject 2 - here is a problem</span>
</div>
<div class="subject">
 <div class="hoverinfo" data-info="The text from subject 3 - OK">show info (hover it)</div>
 <span>subject 3</span>
</div>

score 0 · Answer 2 · answered Feb 24 '16 at 20:16

You could try adjusting the position of the .info message once it starts fading in (alternatively, you could show it, adjust the position, hide it, then use fadeIn, would likely be too fast to see):

if($('.info').offset().top + $('.info').height() > $(this).offset().top){
  $('.info').css('top', $(this).offset().top - $('.info').height());
}

This will check if the bottom of the .info element (top + height) is lower on the page than the top of the .hoverinfo element, and if so, it will set the top of the .info element to the top of the .hoverinfo element minus the height of the .info element. Here's a fiddle: https://jsfiddle.net/L3y6xwvb/.

How to make text expand div to the top

2 Answers2