Question

我使用w3css，php，JS和Mysql。

我用来自MySQL数据库的数据填充表。我希望该表具有可悬停的行，并且在悬停时会产生一个包含其他信息的工具提示。我设法获得标准的工具提示，但它非常平淡。理想情况下，我想要一张带有特定功能列表的特定项目的照片。下拉卡具有理想的样式。请参阅下面的图片。

What I Have

What I Want

我尝试了各种插入下拉菜单，卡片，工具提示等的方法，但是我似乎无法正确地做到这一点。我要么在页面顶部各处出现随机的“ \ 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>

在向我指出正确方向方面的任何协助将不胜感激。谢谢！

行悬停时的w3css表工具提示下拉列表

0 个答案: