Раскрывающаяся всплывающая подсказка таблицы w3css при наведении строки

Я использую w3css, php, JS и Mysql.

Я заполняю таблицу данными из базы данных MySQL. Мне бы хотелось, чтобы в таблице были строки с возможностью перемещения, а при наведении указатель всплывающей подсказки с дополнительной информацией. Мне удалось получить стандартную подсказку, но она очень мягкая. В идеале мне нужна фотография этого конкретного предмета со списком его характеристик. У выпадающей карты идеальный стиль. Смотрите фотографии ниже.

Что я имею

Что я хочу

Я пробовал разные способы вставки выпадающих списков, карточек, всплывающих подсказок и т. Д., Но, похоже, не могу понять, как это правильно. Либо я получаю случайные символы «\ n» в верхней части моей страницы, либо происходит стилизация всей таблицы, где одна строка находится рядом со следующей, а не под ней, как и должно быть в таблице. Ниже выписка из моего кода:

<tbody>
<?php
while ($row = $results->fetch_array()){
if ($row['stockCountDT'] == 0) {
$laststockdate = "None";
} else {
$laststockdate = new DateTime($row['stockCountDT']);
$laststockdate = date_format($laststockdate,'Y-m-d') . " Roll:" . $row['stockCount_ID'];
}

$tooltipdet = "Description: " .$row['gemDesc']."\n\r";
$tooltipdet .= "Species: ".$row['gemSpec'] . "\t Variety: ".$row['gemVar'] . "\n \r";
$tooltipdet .= "Weight: ".$row['gemWeigh'] . "\t Shape: ".$row['gemShape'] . "\n \r";
$tooltipdet .= "Colour: ".$row['gemCol'] . "\t Clarity: ".$row['gemClear'] . "\n \r";
$tooltipdet .= "Treated: ".$row['gemTreat'] . "\t Brilliance: ".$row['gemBrill'] . "\n \r";
if ($row['gemCert'] == 1 ) {
$tooltipdet .= "Certified: Yes \t Certificate: ".$row['gemCertNum'] . "\n \r";
} else {
$tooltipdet .= "Certified:  No \n \r";
}

$tooltipdet .= "Location: ".$row['gemLWarehouse'] . "\t Last Stock Count: ". $laststockdate . "\n \r";
$tooltipdet .= "Status: ".$row['itemStatus'] . "\t Dimentions: ".number_format($row['gemW'],2) . "(w) ".number_format($row['gemL'],2) . "(l) ".number_format($row['gemH'],2) . "(h)" ;

echo    '<tr title ="'.$tooltipdet.'" class="w3-tooltip w3-hover-blue">' ;
echo        '<td class="w3-hide"> '.$row['stockID'].'</td>' ;
echo        '<td> '.$row['barcode'].'</td>' ;
echo        '<td> '.$row['gemSpec'].'</td>' ;
echo        '<td> '.$row['gemVar'].'</td>' ;
echo        '<td> '.$row['gemWeigh'].'</td>' ;
echo        '<td> '.$row['gemShape'].'</td>' ;
echo        '<td> '.$row['gemCol'].'</td>' ;
echo        '<td> <a href="viewitem.php?stockID='.$row['stockID'].'" class="w3-btn w3-medium"><span class="fa fa-eye"></span></a> <a href="edititem.php?stockID='.$row['stockID'].'" class="w3-btn w3-medium"> <span class="fa fa-pencil"></span></button>  </td>' ;
echo    '</tr>';

} ?>
</tbody>

Любая помощь в указании меня в правильном направлении будет принята с благодарностью. Спасибо!