Show tooltip(in span) always top in table - html

Question

Hello I have a table and I made a tooltip with CSS
its shows up when u hover mouse on <td>
here's my jsfiddle : www.jsfiddle.net/4qzurb5w/
How can I make this tooltip always shows up everything in table?

Answer 1

Get rid of this block, it is conflicting:
.green:hover,
.blue:hover,
.red:hover,
.yellow:hover,
.black:hover {
opacity: 0.8;
}
It should work then.
I moved your opacity style to .tooltip .tooltiptext, see stack snippet.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
opacity: 0.8; /* <-- I added your opacity here */
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.div table {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 10px;
text-shadow: 1px 1px 0px #fff;
background: #eaebec;
border: #ccc 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
.div table caption {
font-weight: bold;
font-size: 11px;
}
.div td {
min-width: 100px;
text-align: center;
padding: 5px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.red {
background: #940000 !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.blue {
background: #1C2CFA !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.black {
background: #000000 !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.yellow {
background: #009999 !important;
color: Green !important;
text-shadow: 1px 1px 0px #000000;
}
.white {
background: #fafafa !important;
color: #666 !important;
}
.grey {
background: #808080 !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.ariza {
background: #990000 !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.green {
background: #00941C !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.green:hover,
.blue:hover,
.red:hover,
.yellow:hover,
.black:hover {
/* opacity: 0.8; get rid of this */
}
.green a,
.blue a,
.red a,
.yellow a,
.black a {
display: block;
color: White;
text-decoration: none;
}
.yazitd {
width: 70px !important;
}
.sagtd {
width: 540px !important;
}
.tarihtd {
width: 160px !important;
}
.style3 {
width: 90px;
}
.style4 {
height: 19px;
}
.style5 {
width: 40px;
}
.style6 {
width: 40px;
height: 23px;
}
.style7 {
height: 23px;
}
<table>
<tbody>
<tr>
<td style="vertical-align: middle; min-width: 50px !important; font-weight: bold;">KAT 1 </td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="red tooltip">Daire No:1
<div><span class="tooltiptext">ALEX DE SOUZA<br>HASAN ALİ KALDIRIM<br>ALPER POTUK<br>RIDVAN DİLMEN<br></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:2
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="red tooltip">Daire No:3
<div><span class="tooltiptext">ALİ KOÇ<br></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:4
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: middle; min-width: 50px !important; font-weight: bold;">KAT 2 </td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip" style="font-weight: 400;">Daire No:5
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:6
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:7
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:8
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: middle; min-width: 50px !important; font-weight: bold;">KAT 3 </td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:9
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:10
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:11
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:12
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>