O que eu preciso é criar um atributo title nessa <td>
. Como eu faço?
Você pode fazer assim:
$('table tbody tr td').each(function() {
var td = $(this);
var texto = td.text();
td.attr('title', texto);
if (texto.length > 30) {
texto = texto.substr(0, 30) + '...';
}
td.text(texto);
})
<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>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.
Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado.</td>
<td>R$10</td>
</tr>
<tr>
<td>Café</td>
<td>R$5</td>
</tr>
</tbody>
</table>
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);
})