Tips Tooltips

 

Tentu! Berikut penjelasan sederhana tentang tooltips di HTML menggunakan Bootstrap dan template UI:

Tooltips di HTML dengan Bootstrap

Tooltips adalah elemen kecil yang muncul saat pengguna mengarahkan kursor (hover) ke suatu elemen, memberikan informasi tambahan tanpa mengganggu tampilan utama.

Cara Menggunakan Tooltips di Bootstrap:

1. HTML: Tambahkan atribut data-toggle="tooltip" dan title pada elemen yang ingin diberi tooltip.

   <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip di atas">Hover over me</button>
   

2. JavaScript: Inisialisasi tooltips dengan jQuery.

   $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();
   });
   

3. Penempatan: Gunakan data-placement untuk menentukan posisi tooltip (top, bottom, left, right).

Contoh Tooltip dengan HTML:

<a href="#" data-toggle="tooltip" data-html="true" title="<em>Formatted</em> <u>text</u> <b>here</b>">Hover over me</a>
<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>

Pada contoh ini, data-html="true" memungkinkan penggunaan tag HTML dalam tooltip[1].

Template UI

Template UI adalah kerangka kerja atau desain yang sudah jadi untuk memudahkan pembuatan antarmuka pengguna (UI). Template ini biasanya mencakup berbagai komponen seperti tombol, form, navigasi, dan lain-lain yang sudah diatur dengan baik.

Manfaat Menggunakan Template UI:

• Efisiensi: Menghemat waktu karena tidak perlu membuat desain dari awal.
• Konsistensi: Menjaga konsistensi tampilan dan fungsi di seluruh aplikasi.
• Responsif: Banyak template UI yang sudah dioptimalkan untuk berbagai perangkat.

Dengan menggunakan Bootstrap dan template UI, Anda bisa membuat antarmuka yang menarik dan fungsional dengan lebih mudah dan cepat[2].

Semoga penjelasan ini membantu! Ada yang ingin ditanyakan lebih lanjut?

References

[1] Free Bootstrap Tooltip Tutorial | At Iqra Technology

[2] Creating and Using Tooltips for Enhanced UI Pattern

Menggunakan raw untuk Menghindari Pembersihan HTML

Jika Anda menggunakan Laravel, Anda bisa menggunakan fungsi raw untuk menghindari pembersihan HTML:

return DataTables::of($customer)
    ->addColumn('action', function ($row) {
        return \Illuminate\Support\HtmlString::raw('
            <a href="#" data-toggle="tooltip" data-html="true" title="<em>Formatted</em> <u>text</u> <b>here</b>">Hover over me</a>  
        ');
    });

Isu: Masalahnya bukan pada inisialisasi tooltips di dalam 

$(document).ready(function () { loadDashboard() }), 

Melainkan pada skrip DataTables. Tooltips tidak berfungsi karena tidak diinisialisasi ulang setelah tabel diperbarui.

Solusi: Menambahkan kode berikut di dalam skrip DataTables untuk memastikan tooltips diinisialisasi setiap kali tabel diperbarui:

<script>
    $('#tableCustomer').DataTable().destroy();

    var tableCustomer = $('#tableCustomer').DataTable({
        processing: true,
        serverSide: true,
        info: false,
        ajax: "{{ route('manage.customer.list') }}",
        columns: [
            ...
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.20/i18n/{{ __('dictionary.datatable.table_language') }}',
            paginate: {
                next: '<i class="ti ti-chevron-right ti-sm"></i>',
                previous: '<i class="ti ti-chevron-left ti-sm"></i>'
            }
        }
    });

    $('#tableCustomer').on('draw.dt', function() {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

Untuk memastikan tooltips berfungsi dengan baik setelah tabel diperbarui, pastikan untuk menginisialisasi ulang tooltips setiap kali DataTables selesai memuat data. Ini dapat dilakukan dengan menambahkan kode berikut di dalam skrip DataTables:

$('#tableCustomer').on('draw.dt', function() {
    $('[data-toggle="tooltip"]').tooltip();
});

Untuk menghilangkan tooltip ketika suatu elemen diklik atau ketika interaksi lain terjadi, Anda bisa menggunakan metode dispose() (untuk Bootstrap v5) atau hide() (untuk Bootstrap v4) pada elemen yang terkait dengan tooltip.

Berikut adalah cara untuk mengimplementasikannya:

---

1. Menghapus Tooltip Saat Tombol Diklik

Tambahkan event listener pada elemen yang memiliki data-toggle="tooltip". Ketika elemen diklik, tooltip akan dihapus.

Bootstrap v4

$('#tableCustomer').on('draw.dt', function() {
    $('[data-toggle="tooltip"]').tooltip(); // Inisialisasi tooltip
});

// Hapus tooltip saat elemen diklik
$('#tableCustomer').on('click', '[data-toggle="tooltip"]', function() {
    $(this).tooltip('hide'); // Tooltip dihilangkan
});

Bootstrap v5

$('#tableCustomer').on('draw.dt', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
        new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

// Hapus tooltip saat elemen diklik
$('#tableCustomer').on('click', '[data-toggle="tooltip"]', function() {
    var tooltipInstance = bootstrap.Tooltip.getInstance(this); // Ambil instance tooltip
    if (tooltipInstance) {
        tooltipInstance.dispose(); // Hapus tooltip
    }
});

---

2. Menghapus Tooltip Saat Interaksi Lain (Misalnya, Mouse Leave)

Jika Anda ingin tooltip dihapus saat pengguna mengarahkan kursor keluar dari elemen (atau pada interaksi lainnya), gunakan event tambahan seperti mouseleave atau yang sesuai.

Bootstrap v4

$('#tableCustomer').on('mouseleave', '[data-toggle="tooltip"]', function() {
    $(this).tooltip('hide');
});

Bootstrap v5

$('#tableCustomer').on('mouseleave', '[data-toggle="tooltip"]', function() {
    var tooltipInstance = bootstrap.Tooltip.getInstance(this);
    if (tooltipInstance) {
        tooltipInstance.dispose();
    }
});

---

3. Menghapus Semua Tooltip Sekaligus

Jika Anda ingin menghapus semua tooltip aktif di tabel (misalnya, setelah klik tombol tertentu atau saat halaman berubah), Anda dapat melakukannya dengan iterasi:

Bootstrap v4

$('#tableCustomer').on('someEvent', function() { // Ganti `someEvent` dengan event yang relevan
    $('[data-toggle="tooltip"]').tooltip('hide');
});

Bootstrap v5

$('#tableCustomer').on('someEvent', function() { // Ganti `someEvent` dengan event yang relevan
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
        var tooltipInstance = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
        if (tooltipInstance) {
            tooltipInstance.dispose();
        }
    });
});

---

Penjelasan

1. tooltip('hide'):

   • Digunakan di Bootstrap v4 untuk menyembunyikan tooltip pada elemen tertentu.

2. dispose():

   • Digunakan di Bootstrap v5 untuk menghapus tooltip sepenuhnya, termasuk instance yang terkait dengan elemen.

3. Event Listener:

   • Anda bisa menggunakan berbagai event, seperti click, mouseleave, atau bahkan custom event tergantung kebutuhan.

4. Global Tooltip Removal:

   • Jika Anda perlu menghapus semua tooltip aktif sekaligus (misalnya, saat navigasi antar halaman dalam aplikasi), iterasi melalui elemen-elemen tooltip akan sangat membantu.