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")" /> value="@DateTime.Now.ToString("yyyy-MM")" />
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table-zebra table" id="tableRapot"> <table class="table table-zebra w-full" id="tableRapot">
<thead> <thead>
<tr> <tr>
<th class="w-[5%]">No</th> <th class="w-[5%]">No</th>
<th class="w-[25%]">Nama</th> <th class="w-[20%]">Nama</th>
<th class="w-[15%]">Checklist</th>
<th class="w-[15%]">Berat Sampah</th> <!-- CHECKLIST -->
<th class="w-[10%]">Foto</th> <th class="w-[15%]">
<th class="w-[15%]">Rumah Aktif Memilah</th> <div class="flex items-center gap-2">
<th class="w-[15%]">Status</th> <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> </tr>
</thead> </thead>
<tbody></tbody>
</table> </table>
</div> </div>
</div> </div>
@ -107,7 +175,6 @@
$(document).ready(function () { $(document).ready(function () {
tableRapot = new DataTable('#tableRapot', { tableRapot = new DataTable('#tableRapot', {
ajax: '@Url.Action("TableRapot", "DataPendampingRw")', ajax: '@Url.Action("TableRapot", "DataPendampingRw")',
scrollX: true,
initComplete: function () { initComplete: function () {
$('div.dt-scroll-body thead').css('visibility', 'collapse'); $('div.dt-scroll-body thead').css('visibility', 'collapse');
}, },