O que eu preciso é criar um atributo title nessa `<td>`. Como eu faço?
----------------------------------------------------------------------



Você pode fazer assim:


<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    $('table tbody tr td').each(function() {
      var td = $(this);
      var texto = td.text();
      td.attr('title', texto);
    })

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <table class="table text-center">
      <thead>
        <tr>
          <td>Descrição</td>
          <td>Valor</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sucrilios</td>
          <td>R$10</td>
        </tr>
        <tr>
          <td>Café</td>
          <td>R$5</td>
        </tr>
      </tbody>
    </table>

<!-- end snippet -->

 
Não há necessidade de deixar o conteúdo no title menor já que o title consegue mostrar longos textos com facilidade, mas se isto for sua intenção poderá fazer assim:

    $('table tbody tr td').each(function() {
      var td = $(this);
      var texto = td.text();
      if (texto.length > 30) {
        texto = texto.substr(0, 30) + '...';
      }
      td.attr('title', texto);
    })