如何在HTML中的表格單元格內制作工具提示

Question

我有一個從數據庫獲取數據的動態表。

我希望工具提示顯示在$row['The_Job'] 。 但同時，重要的一點是，此列對單元格內部的數據（而不是工具提示）具有特定的樣式。 我在下面附上了CSS .job-styling 。

    <?php
  $sql = "SELECT * FROM request_data;";
  $conn = Connect();
  mysqli_set_charset($conn,'utf8');
  $result = mysqli_query($conn, $sql);
  $resultCheck = mysqli_num_rows($result); //<td class="job-style">'.$row['The_Job'].'</td> 

  if ($resultCheck > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        echo '<table style = "width:100%">
                <tr>
                  <td style = "width:13%">'.$row['ID'].'</td>
                  <td class="job-style">'.$row['The_Job'].'</td>
                  <td style = "width:8%">'.$row['Paymentfro'].'-'.$row['Paymentto'].'</td>
                  <td style = "width:8%">'.$row['Amount'].'</td>
                  <td style = "width:10%">'.$row['Urgency'].'</td>
                  <td style = "width:8%">'.$row['Difficulty'].'</td>        
                </tr>
              </table>';
    }
  }

?>


.job-style {
            max-width:100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

我該怎么辦？ 我應該添加什么CSS，以及如何更改php代碼？

Answer 1

HTML title屬性表示要用於鼠標懸停時的工具提示的文本。 因此，在需要工具提示的位置（例如在<td>元素中），請包含title="tooltip text" 。 Tha顯示無法設置樣式的內置（瀏覽器）工具提示。

對於您稍后在注釋中引用的其他自定義樣式的工具提示，您的代碼應該看起來更像這樣（為簡便起見，我僅包括您指出的需要工具提示的單元格）：

<td class="job-style">
    <div class="tooltip">'.$row['The_Job'].'
        <span class="tooltiptext">Tooltip text</span>
    </div>
</td>