Anda dapat menyesuaikan tooltip yang muncul saat pengguna mengarahkan kursor ke elemen dalam visualisasi Looker. Tooltip yang disesuaikan memungkinkan Anda memberikan lebih banyak konteks, menampilkan metrik tambahan, dan menyesuaikan informasi yang ditampilkan kepada pengguna. Fitur Labs Tooltip Kustom memungkinkan Anda mengonfigurasi tooltip dalam editor visualisasi Jelajahi menggunakan kombinasi setelan UI dan editor HTML yang mendukung template Liquid.
Halaman ini memberikan panduan untuk mengaktifkan dan menggunakan fitur Labs Tooltip Kustom di instance Looker (asli) Anda. Halaman ini mencakup bagian-bagian berikut:
- Memberikan masukan atau mendapatkan dukungan
- Persyaratan pengguna dan instance
- Batasan
- Mengaktifkan Tooltips Kustom
- Cara menggunakan Tooltips Kustom
- Contoh
- Referensi terkait
Memberikan masukan atau mendapatkan dukungan
Anda dapat memberikan masukan atau meminta dukungan dengan mengisi dan mengirimkan formulir Looker Custom Tooltips - Preview Issues ini.
Persyaratan pengguna dan instance
Untuk mengaktifkan dan menggunakan fitur Labs Tooltip Kustom, Anda harus memenuhi persyaratan berikut:
- Instance Looker (asli) Anda harus menjalankan Looker 26.0 atau yang lebih baru dan dihosting oleh Looker.
- Anda harus memiliki peran Admin untuk mengaktifkan fitur Labs Tooltip Kustom.
- Untuk membuat tooltip kustom di Eksplorasi, Anda harus memiliki izin
explore, dan akses ke model LookML pokok.
Batasan
Fitur Labs Tooltip Kustom memiliki batasan berikut:
- Tooltip kustom hanya didukung untuk diagram tabel, diagram nilai tunggal, dan diagram Cartesius. Tooltip kustom tidak didukung untuk diagram lingkaran, boxplot, atau waterfall.
- Tips alat kustom hanya dapat merujuk kolom yang disertakan dalam kueri Jelajahi.
- Tips alat hanya dapat menampilkan perincian data yang sama dengan kolom tertentu. Jika pengguna ingin melihat tingkat data yang lebih terperinci daripada yang tersedia di tooltip, mereka harus menggunakan fungsi lihat perincian.
- Tips alat kustom disimpan di tingkat visualisasi. Filter ini tidak dapat disimpan di tingkat Eksplorasi.
- Jika Anda menghapus kolom dari kueri Eksplorasi yang memiliki tooltip kustom, pengguna masih dapat melihat tooltip tersebut jika kueri Eksplorasi dibagikan kepada mereka dan mereka menambahkan kembali kolom ke kueri Eksplorasi.
- HTML yang dirender di tooltip kustom tunduk pada aturan pembersihan HTML Looker.
- Tidak semua variabel Liquid dapat didukung untuk tooltip kustom.
- Penyesuaian tooltip akan menggantikan tema apa pun yang diterapkan ke dasbor internal (non-sematan) atau dasbor sematan.
Mengaktifkan Tooltips Kustom
Fitur Lab Tooltip Kustom diaktifkan secara default.
Jika fitur Labs Tooltip Kustom sebelumnya telah dinonaktifkan, admin Looker dapat mengaktifkan fitur Labs Tooltip Kustom dengan mengikuti langkah-langkah berikut:
- Di Looker, klik opsi Admin di menu navigasi utama.
- Klik opsi Labs di bagian Umum untuk membuka halaman Labs.
- Pilih tombol Tooltip Kustom untuk mengaktifkan fitur Labs.
Cara menggunakan Tooltips Kustom
Jika memiliki izin yang sesuai, Anda dapat menyesuaikan tooltip untuk deret dalam visualisasi Jelajah. Untuk menyesuaikan tooltip, ikuti langkah-langkah berikut:
- Buka atau buat kueri Jelajah dan pilih jenis visualisasi yang didukung.
- Klik Edit di tab Visualisasi Jelajahi untuk membuka editor visualisasi.
- Pilih tab Seri.
- Di bagian Penyesuaian, cari deret yang ingin Anda tambahkan tooltip-nya. Jika ada beberapa deret, perluas deret yang ingin Anda tambahi tooltip.
- Pilih tombol Tooltip Kustom untuk mengaktifkan fungsi tooltip kustom untuk deret tertentu tersebut.
- Di bagian Tooltip Kustom, Anda dapat menyesuaikan tampilan dasar tooltip menggunakan opsi yang tersedia:
- Ukuran Font: Menetapkan ukuran font tooltip.
- Jenis Font: Menetapkan jenis font dari font tooltip.
- Warna Latar Belakang Tooltip: Menetapkan warna latar belakang tooltip.
- Warna Font: Menetapkan warna font tooltip.
- Radius Batas: Menetapkan pembulatan tepi tooltip. Semakin tinggi angkanya, semakin bulat tepi tooltip.
- Bayangan Batas: Menetapkan bayangan tooltip.
- Perataan Teks: Menetapkan perataan font tooltip.
- Selain atau sebagai alternatif dari opsi sebelumnya, Anda dapat menerapkan opsi gaya yang lebih canggih dengan mengklik Edit Konten Tooltip untuk membuka editor HTML Edit konten tooltip.
Di editor Edit Konten Tooltip, Anda dapat menggunakan HTML dan variabel Liquid untuk menyusun dan mengisi tooltip.
- Gunakan tag HTML standar untuk memformat konten tooltip Anda (misalnya,
<div>,<span>,<strong>,<table>,<ul>,<ol>). Perhatikan bahwa HTML yang dirender tunduk pada aturan pembersihan HTML Looker. - Tidak semua variabel Liquid dapat didukung untuk tooltip kustom.
- Gunakan tag HTML standar untuk memformat konten tooltip Anda (misalnya,
Saat mengedit konten tooltip kustom, Anda dapat melihat pratinjau tooltip dengan mengklik Pratinjau (atau pintasan keyboard Command-Return untuk Mac, atau Ctrl+Enter untuk PC) dan mengarahkan kursor ke titik data di panel pratinjau visualisasi.
Klik Simpan di editor HTML, lalu simpan Eksplorasi sebagai Look atau sebagai kartu dasbor untuk mempertahankan perubahan.
Contoh
Contoh berikut menunjukkan kasus penggunaan untuk berbagai tingkat penyesuaian tooltip:
- Tooltip kustom dengan beberapa nilai ukuran
- Tooltip kustom dengan nilai tersembunyi yang disusun sebagai tabel
- Tooltip kustom dengan fungsi Liquid umum
Tooltip kustom dengan beberapa nilai ukuran
Tooltip kustom dapat berguna jika Anda ingin memberikan lebih banyak konteks kepada pengguna tentang titik data yang ditampilkan dalam visualisasi. Misalnya, diagram nilai tunggal menampilkan nilai hanya satu ukuran. Dengan tooltip kustom, Anda dapat menampilkan lebih banyak data, dan memberikan lebih banyak konteks kepada pengguna tentang data dalam diagram.
Dalam contoh ini, diagram nilai tunggal berjudul "Jumlah pesanan pada tahun 2025" menampilkan nilai untuk Jumlah Pesanan untuk Negara Pengguna "Amerika Serikat", dan didasarkan pada kueri Jelajah yang juga menyertakan Jumlah Item Pesanan. Namun, nilai untuk Jumlah Item Pesanan tidak ditampilkan dalam diagram.
HTML berikut dimasukkan di editor Edit Konten Tooltip untuk deret Jumlah Pesanan, dan menetapkan konten untuk menyertakan nilai Jumlah Item Pesanan dalam tooltip:
<div style="padding: 5px; font-family: Arial, sans-serif; font-size: 13px;">
<div>
<strong>Order Items Count:</strong> {{ order_items.count }}
</div>
<div>
<strong>Orders Count:</strong> {{ orders.count }}
</div>
</div>
Pengguna dapat melihat nilai untuk kedua kolom, Jumlah Pesanan dan Jumlah Item Pesanan, serta memiliki lebih banyak konteks untuk data yang ditampilkan dalam diagram.
Tooltip kustom dengan nilai tersembunyi yang disusun sebagai tabel
Seperti yang disebutkan dalam informasi batasan di halaman ini, tooltip kustom hanya dapat mereferensikan kolom yang disertakan dalam kueri Jelajah. Namun, Anda mungkin tidak ingin menampilkan semua kolom Eksplorasi dalam diagram. Dengan tooltip kustom, Anda dapat menampilkan data dari kolom yang disembunyikan dari visualisasi kepada pengguna, tanpa menambahkannya ke diagram.
Dalam contoh ini, tabel data Eksplorasi menyertakan ukuran Jumlah Pesanan dan Jumlah Item Pesanan, yang dikelompokkan menurut dimensi Negara Bagian Pengguna dan Status Pesanan. Developer ingin menampilkan tabel kecil kepada pengguna, dan menyembunyikan kolom Status Pesanan dan Jumlah Item Pesanan dari diagram tabel. Namun, developer tetap ingin pengguna melihat nilai Status Pesanan dan Jumlah Item Pesanan yang terkait dengan Jumlah Pesanan tertentu.
HTML berikut dimasukkan di editor Edit Konten Tooltip untuk deret Jumlah Pesanan, dan menetapkan konten untuk menyertakan nilai Status Pesanan dan Jumlah Item Pesanan dalam tooltip, yang disusun sebagai tabel:
<div>
<div>
<table border="1">
<!-- Table Body -->
<tbody>
<!-- Row 1 -->
<tr>
<td>
<strong>Order status</strong>
</td>
<td>
{{ orders.status }}
</td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<strong>State</strong>
</td>
<td>
{{ users.state }}
</td>
</tr>
<!-- Row 3 -->
<tr>
<td>
<strong>Count of orders</strong>
</td>
<td>
{{ orders.count }}
</td>
</tr>
<!-- Row 4 -->
<tr>
<td>
<strong>Count of order items</strong>
</td>
<td>
{{ order_items.count }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
Pengguna dapat melihat semua data kueri Jelajah, tanpa kolom tambahan yang ditampilkan dalam diagram tabel.
Tooltip kustom dengan fungsi Liquid umum
Tips alat kustom mendukung fungsi Liquid umum seperti piping dan penggunaan pernyataan downcast. Dalam contoh ini, diagram kolom menampilkan Jumlah Pesanan yang dikelompokkan menurut Status Pesanan. Developer ingin memformat tooltip sehingga pengguna dapat dengan cepat mengidentifikasi perbedaan antara Jumlah Pesanan untuk Status Pesanan "DIBATALKAN" dan Status Pesanan "SELESAI".
HTML dan Liquid berikut dimasukkan di editor Edit Konten Tooltip untuk deret Jumlah Pesanan, dan menetapkan nilai tooltip agar muncul berwarna merah untuk jumlah pesanan dengan status "DIBATALKAN" dan hijau untuk pesanan dengan status "SELESAI". Kode ini menggunakan penetapan variabel dan piping untuk memastikan akurasi string, dan untuk menerapkan format bersyarat yang ditentukan:
{% assign my_variable = orders.status | downcase | strip %}
{% if my_variable == "completed" %}
<span style="color:green">{{orders.count}}</span>
{% else %}
<span style="color:red">{{orders.count}}</span>
{% endif %}
Nilai Jumlah Pesanan untuk kolom Status Pesanan "SELESAI" menampilkan teks hijau di tooltip.
Nilai Jumlah Pesanan untuk kolom Status Pesanan "DIBATALKAN" menampilkan teks merah di tooltip.
Pengguna dapat dengan cepat membedakan antara pesanan yang dibatalkan dan diselesaikan yang ditampilkan dalam diagram batang.
Referensi terkait
- Pelajari lebih lanjut cara membuat visualisasi.
- Tinjau halaman dokumentasi Referensi variabel Liquid untuk mengetahui cara lainnya dalam menggunakan Liquid di Looker.
- Tinjau halaman dokumentasi pembersihan HTML untuk mengetahui informasi selengkapnya tentang tag HTML yang didukung Looker.