Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MarceloxSampaio

Como criar tooltip em uma linha de uma tabela

Por , em Desenvolvimento frontend

Recommended Posts

MarceloxSampaio    0

MarceloxSampaio
Postado

Como criar tooltip em uma linha de uma tabela

exemplo:

 

<table>
<tr>
<span class="tooltip"></span>
<td></td>
</tr>
</table>
ja tentei por position relative na <tr> e por na classe .tooltip porsition relative, mas sem sucesso.
desde já agradeço a ajuda de todos.
codigo completo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
.table > tbody > tr { position: relative; }
.tooltip { position: absolute; background: blue; left: 0; top: 0px }
</style>
</head>
<body>
<table border="1" width="100%" class="table">
<thead>
<tr>
<th>x</th>
<th>x</th>
</tr>
</thead>
<tbody>
<tr>
<span class="tooltip"> o nome do tooltip </span>
<td>x</td>
<td>x</td>
</tr>
<tr>
<span class="tooltip"> o nome do tooltip </span>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Pra usar uma tooltip, não utilize a tag <Span> (a não ser que você queira implementar um JS ou um CSS bacaninha pra ele aparecer no hover). Ao invés disso, tente essa tag:

<td title="Nome da célula aqui"></td>

Dessa forma, você está adicionando um título a sua nova coluna. Ao passar o mouse por cima (hover), ele vai mostrar uma tooltip com o que você digitou dentro do Title.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito