feat: add tooltip info

main-dlh
Regiaaaaaa 2025-12-22 20:30:55 +07:00
parent 04f88fcdcc
commit ba3a6b5b82
1 changed files with 76 additions and 9 deletions

View File

@ -38,19 +38,87 @@
value="@DateTime.Now.ToString("yyyy-MM")" />
</div>
<div class="overflow-x-auto">
<table class="table-zebra table" id="tableRapot">
<table class="table table-zebra w-full" id="tableRapot">
<thead>
<tr>
<th class="w-[5%]">No</th>
<th class="w-[25%]">Nama</th>
<th class="w-[15%]">Checklist</th>
<th class="w-[15%]">Berat Sampah</th>
<th class="w-[10%]">Foto</th>
<th class="w-[15%]">Rumah Aktif Memilah</th>
<th class="w-[15%]">Status</th>
<th class="w-[20%]">Nama</th>
<!-- CHECKLIST -->
<th class="w-[15%]">
<div class="flex items-center gap-2">
<span>Checklist</span>
<div class="tooltip tooltip-top"
data-tip="0 = Merah
Checklist < 15 = Kuning
Checklist > 15 = Hijau">
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
info
</span>
</div>
</div>
</th>
<!-- BERAT SAMPAH -->
<th class="w-[15%]">
<div class="flex items-center gap-2">
<span>Berat Sampah</span>
<div class="tooltip tooltip-top"
data-tip="0 Merah">
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
info
</span>
</div>
</div>
</th>
<!-- FOTO -->
<th class="w-[10%]">
<div class="flex items-center gap-2">
<span>Foto</span>
<div class="tooltip tooltip-top"
data-tip="0 Merah">
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
info
</span>
</div>
</div>
</th>
<!-- RUMAH AKTIF MEMILAH -->
<th class="w-[20%]">
<div class="flex items-center gap-2">
<span>Rumah Aktif Memilah</span>
<div class="tooltip tooltip-top"
data-tip="
0 Merah
< 10 Kuning
>= 10 Hijau">
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
info
</span>
</div>
</div>
</th>
<!-- STATUS -->
<th class="w-[15%]">
<div class="flex items-center gap-2">
<span>Status</span>
<div class="tooltip tooltip-top"
data-tip="Sangat Baik = Semua Hijau
Baik = 3 Hijau
Cukup Baik = 2 Hijau
Kurang Baik = 1 Hijau
Tidak Baik = Semua Merah">
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
info
</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
@ -107,7 +175,6 @@
$(document).ready(function () {
tableRapot = new DataTable('#tableRapot', {
ajax: '@Url.Action("TableRapot", "DataPendampingRw")',
scrollX: true,
initComplete: function () {
$('div.dt-scroll-body thead').css('visibility', 'collapse');
},