J. Doe J. Doe - 7 months ago 25
HTML Question

<div> info box on a static place

CSS:

#box{
padding:0;
margin:20px;
border:1px solid black;
font:bold 14px verdana, sans-serif;
}
#box div{display:none;
}
#box:hover div{
display:block;
width:150px;
height:90px;
position:absolute;
border:2px solid white;
padding:15px;
font:normal 12px verdana, sans-serif;
float:right;
margin-left:28px;
margin-top: -52px;
background-color: #000000;
}


HTML:

<td id="box" class='ok_term'>51
<div>
<p><strong><u>Important</u></strong></p>
<p>blabla</p>
</div></td>


It´s there any way to display the box static right to the table and not right to the mouse? It´s just right to the mouse, but I want it right to the table, with a little space.

Answer

Do like this, where you set the table to position: relative and then let your div's pop up at left: 100%, which will be relative to the table in this case.

table {
  position: relative;
}
#box {
  padding: 0;
  margin: 20px;
  border: 1px solid black;
  font: bold 14px verdana, sans-serif;
}
#box div {
  display: none;
}
#box:hover div {
  color: white;
  display: block;
  width: 150px;
  height: 90px;
  position: absolute;
  border: 2px solid white;
  padding: 15px;
  font: normal 12px verdana, sans-serif;
  left: 100%;
  top: 0;
  background-color: #000000;
}
<table border="1">
  <tr>
    <td id="box" class='ok_term'>51
      <div>
        <p><strong><u>Important</u></strong></p>
        <p>blabla</p>
      </div>
    </td>
    <td id="box" class='other_term'>ok_f
      <div>
        <p><strong><u>Important</u></strong></p>
        <p>hi</p>
      </div>
    </td>

  </tr>
</table>

Comments