EDIT:
By reading the question I understand that you want the effect only on the line of the <tr>
table. Then there are two ways to do following the idea of the answer already given.
tr {
position: relative;
border: 1px solid salmon;
}
tr:first-of-type:hover::after {
content: attr(data-text);
position: absolute;
z-index: 99;
background-color: powderblue;
border-radius: 5px;
padding: 4px 10px;
font-size: 10px;
font-family: sans-serif;
}
td {
border: 1px solid salmon
}
<table>
<tr data-text="descrição n# 1">
<td >TR</td>
<td>com hover::after</td>
</tr>
<tr title="descrição n# 2">
<td>TR</td>
<td>com title=""</td>
</tr>
</table>
Follows a simple solution using pseudo-element and a custom attribute in content
td {
position: relative;
border: 1px solid salmon;
}
td:hover::after {
content: attr(data-text);
position: absolute;
z-index: 99;
top: 115%;
left: 0;
background-color: powderblue;
border-radius: 5px;
padding: 4px 10px;
font-size: 10px;
font-family: sans-serif;
}
<table>
<tr>
<td data-text="descrição n# 1">item 1</td>
<td data-text="descrição n# 2">item 2</td>
</tr>
<tr>
<td data-text="descrição n# 3">item 3</td>
<td data-text="descrição n# 4">item 4</td>
</tr>
</table>
Now, there are some elements that accept the title=""
attribute in the tag, and they work similarly to <abbr>
such as <a>
tag and <p>
<a href="#" title="meu link">deixe o mouse</a>
<p title="tag p">isso é um P</p>
You can do the same in the table, but you will not be able to run TR in TD only
table {border: 1px solid black}
<table>
<tr title="teste TR 1">
<td title="teste 1" data-text="descrição n# 1">item 1</td>
<td title="teste 2" data-text="descrição n# 2">item 2</td>
</tr>
<tr title="teste TR 1">
<td title="teste 3" data-text="descrição n# 3">item 3</td>
<td title="teste 4" data-text="descrição n# 4">item 4</td>
</tr>
</table>
OBS: Accessibility considerations and the title
attribute
The use of the title attribute is highly problematic for:
- People who use touch-only devices
- People browsing with keyboards
- People who navigate with assistive technology, such as screen readers or magnifiers
- People with motor control deficiencies
- People with cognitive concerns
Source: link