css break words into new lines and becomes off positioned

Question

I'm trying to create a simple tooltip without the need for js.

I'm wondering what the best approach is. I want dynamic text to be able to fit in a tooltip container smoothly, responsively on top of its container, the issue with the current code is that it doesn't stretch on its own, it breaks words into new lines which changes the height of the whole thing and then the positioning is off and it overlaps its container.

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  height: 25px;
  width: 25px;
  position: relative;
}

div {
  position: absolute;
  top: -25px;;
}

span {
  display: inline-block;
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  font-size: 15px;
  padding: 5px;
  width: auto;
}

td:hover div span {
  display: inline-block;
}

<table>
  <tr>
    <td>
    something
      <div>
        <span>
          text
        </span>
      </div>
    </td>    
    <td>
    something
      <div>
        <span>
          some long text
        </span>
      </div>
    </td>
  </tr>
</table>

Answer 1

If you don't want to break text in tooltip you can use white-space: nowrap. You can also use transform: translate() to position tooltip in middle of td With arrow

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  white-space: nowrap;
  padding: 5px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

td:hover span {
  opacity: 1;
}

<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

Or if you want tooltip to be same size as td you can use width: 100%

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 5px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

td:hover span {
  opacity: 1;
}

<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

You can also use :after pseudo element to add small arrow under tooltip

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 5px;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

span:before {
  width: 0; 
  height: 0; 
  content: '';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid black;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}

td:hover span {
  opacity: 1;
}

<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

Answer 2

You mean something like? Let me know.

If you want your tooltip above hover item, add bottom:100% to tooltip element.

table {
  margin-top: 100px;
}

td {
  border: solid 1px #000;
  height: 25px;
  width: 150px;
  position: relative;  
  /*style to show it better to you*/
  display:block;
  margin-right:50px;
  float:left;
}

div {
  position: absolute;
  bottom: 100%;
  left:50%;
  width:60px;
  margin-left:-30px;
}

span {
  display: none;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-size: 15px;
  padding: 5px;
  width: auto;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
  width:100%;
  text-align:center;
}

td:hover div span {
  display: inline-block;
}

<table>
  <tr>
    <td>
      something
      <div>
        <span>
          text
        </span>
      </div>
    </td>
    <td>
      something
      <div>
        <span>
          some long text
        </span>
      </div>
    </td>
  </tr>
</table>

Answer 3

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  height: 25px;
  width: 25px;
  position: relative;
}

div {
  position: absolute;
  top: -25px;;
}

span {
  display: inline-block;
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  font-size: 15px;
  padding: 5px;
  width: auto;
white-space: nowrap;
}

td:hover div span {
  display: inline-block;
}

<table>
  <tr>
    <td>
    something
      <div>
        <span>
          text
        </span>
      </div>
    </td>    
    <td>
    something
      <div>
        <span>
          some long text
        </span>
      </div>
    </td>
  </tr>
</table>

Try using white-space: nowrap;