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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.