如何在HTML中的表格单元格内制作工具提示

Question

I have a dynamic table that gets data from a database.

The column that I want a tooltip to appear in $row['The_Job'] . But at the same time, it is important that this column has certain styling for the data that is inside the cell (not the tooltip). I have attached the CSS .job-styling below.

    <?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;
        }

How should I do it? What CSS should I add and how to change the php code?

Answer 1

The HTML title attribute denotes text to be used for a tooltip on mouse hover. So where you want the tooltip, for example in a <td> element, include title="tooltip text" . Tha displays built-in (browser) tooltips which aren't styleable.

For the other, custom-styled tooltips you referenced later in your comment, your code should probably look more like this (for brevity I've included just the cell you pointed out as needing a tooltip):

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