I have a data table with an interesting feature - when you hover over the icon in the last column, it displays more information about that specific record. Here's how it looks:
However, I'd like to enhance this functionality by displaying a black background div next to the icon with detailed info every time you hover over the blue icon. Each icon should show different information. Below is the CSS code for this additional feature:
CSS
.info-extra {
position: fixed;
z-index: 999;
background-color: black;
color: white;
width: 300px;
height: 150px;
border-radius: 5px;
box-shadow: 3px 3px 3px gray;
top: 50%;
left: 50%;
}
HTML
echo '<td><img src="Images/iconos/fatcow/FatCow_Icons16x16/information.png" onmouseover="mostrarInfo('.$extra.')" onmouseout="ocultarInfo('.$extra.')"></td>';
echo '<div id="extra-' . $extra . '" class="info-extra" style="display: none;">
<p>Hola</p>
</div>';
This is how the end result should look like:
For the final touch, make sure the black background div aligns neatly next to the centered icon. How can this be achieved to work seamlessly with all icons? Any assistance would be greatly appreciated. Thank you.
Javascript
function mostrarInfo(numero) {
$('#extra-' + numero).show();
}
function ocultarInfo(numero) {
$('#extra-' + numero).hide();
}