Anda dapat menyesuaikan tooltip yang muncul saat pengguna mengarahkan kursor ke elemen dalam visualisasi Looker. Dengan tooltip yang disesuaikan, Anda dapat memberikan lebih banyak konteks, menampilkan metrik tambahan, dan menyesuaikan informasi yang ditampilkan kepada pengguna. Fitur Labs Custom Tooltipsmemungkinkan Anda mengonfigurasi tooltip dalam editor visualisasi Eksplorasi menggunakan kombinasi setelan UI dan editor HTML yang mendukung pembuatan template Liquid.
Halaman ini memberikan panduan untuk mengaktifkan dan menggunakan fitur Labs Custom Tooltips di instance Looker (original). Halaman ini mencakup bagian-bagian berikut:
- Memberikan masukan atau mendapatkan dukungan
- Persyaratan pengguna dan instance
- Batasan
- Mengaktifkan Custom Tooltips
- Cara menggunakan Custom Tooltips
- 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 Custom Tooltips, Anda harus memenuhi persyaratan berikut:
- Instance Looker (original) Anda harus menjalankan Looker 26.0 atau yang lebih baru dan dihosting oleh Looker.
- Anda harus memiliki peran Admin untuk mengaktifkan fitur Labs Custom Tooltips.
- Untuk membuat tooltip kustom di Eksplorasi, Anda harus memiliki izin
explore, dan akses ke model LookML yang mendasarinya.
Batasan
Fitur Labs Custom Tooltips memiliki batasan berikut:
- Tooltip kustom hanya didukung untuk diagram tabel, diagram nilai tunggal, dan diagram Cartesian. Tooltip kustom tidak didukung untuk diagram lingkaran, diagram kotak, atau diagram waterfall.
- Tooltip kustom hanya dapat mereferensikan kolom yang disertakan dalam kueri Eksplorasi.
- Tooltip hanya dapat menampilkan granularitas data yang sama dengan kolom tertentu. Jika pengguna ingin melihat tingkat data yang lebih mendetail daripada yang tersedia di tooltip, mereka harus menggunakan fungsi penelusuran.
- Tooltip kustom disimpan di tingkat visualisasi. Tooltip kustom 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 dalam tooltip kustom tunduk pada aturan sanitasi HTML Looker.
- Tidak semua variabel Liquid mungkin didukung untuk tooltip kustom.
- Penyesuaian tooltip akan mengganti tema apa pun yang diterapkan ke dasbor internal (non-sematan) atau dasbor sematan.
Mengaktifkan Custom Tooltips
Fitur Labs Custom Tooltips diaktifkan secara default.
Jika fitur Labs Custom Tooltips sebelumnya dinonaktifkan, admin Looker dapat mengaktifkan fitur Labs Custom Tooltips dengan mengikuti langkah-langkah berikut:
- Di Looker, klik opsi Admin di menu navigasi utama.
- Klik opsi Labs di bagian General untuk membuka halaman Labs.
- Pilih tombol Custom Tooltips untuk mengaktifkan fitur Labs.
Cara menggunakan Custom Tooltips
Jika memiliki izin yang sesuai, Anda dapat menyesuaikan tooltip untuk rangkaian dalam visualisasi Eksplorasi. Untuk menyesuaikan tooltip, ikuti langkah-langkah berikut:
- Buka atau buat kueri Eksplorasi dan pilih jenis visualisasi yang didukung.
- Klik Edit di tab Visualization Eksplorasi untuk membuka editor visualisasi.
- Pilih tab Series.
- Di bagian Customizations, temukan rangkaian yang ingin Anda tambahkan tooltip. Jika ada beberapa rangkaian, luaskan rangkaian yang ingin Anda tambahkan tooltip.
- Pilih tombol Custom Tooltip untuk mengaktifkan fungsi tooltip kustom untuk rangkaian tertentu tersebut.
- Di bagian Custom Tooltip, Anda dapat menyesuaikan tampilan dasar tooltip menggunakan opsi yang disediakan:
- Ukuran Font: Menetapkan ukuran font tooltip.
- Font Family: Menetapkan jenis font tooltip.
- Warna Latar Belakang Tooltip: Menetapkan warna latar belakang tooltip.
- Warna Font: Menetapkan warna font tooltip.
- Border Radius: Menetapkan pembulatan tepi tooltip. Semakin tinggi angkanya, semakin bulat tepi tooltip.
- Border Shadow: Menetapkan bayangan tooltip.
- Perataan Teks: Menetapkan perataan font tooltip.
- Selain atau sebagai alternatif untuk opsi sebelumnya, Anda dapat menerapkan opsi gaya yang lebih canggih dengan mengklik Edit Tooltip Content untuk membuka editor HTML Edit tooltip content.
Di editor Edit Tooltip Content, Anda dapat menggunakan variabel HTML dan Liquid untuk menyusun dan mengisi tooltip.
- Gunakan tag HTML standar untuk memformat konten tooltip (misalnya,
<div>,<span>,<strong>,<table>,<ul>,<ol>). Perhatikan bahwa HTML yang dirender tunduk pada aturan sanitasi HTML Looker. - Tidak semua variabel Liquid mungkin didukung untuk tooltip kustom.
- Gunakan tag HTML standar untuk memformat konten tooltip (misalnya,
Saat mengedit konten tooltip kustom, Anda dapat melihat pratinjau tooltip dengan mengklik Preview (atau pintasan keyboard Command-Return untuk Mac, atau Ctrl+Enter untuk PC) dan mengarahkan kursor ke titik data di panel pratinjau visualisasi.
Klik Save 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 hanya menampilkan nilai 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 "Count of orders in 2025" menampilkan nilai untuk Orders Count untuk Users Country "USA", dan didasarkan pada kueri Eksplorasi yang juga menyertakan Order Items Count. Namun, nilai untuk Order Items Count tidak ditampilkan dalam diagram.
HTML berikut dimasukkan di editor Edit Tooltip Content untuk rangkaian Orders Count, dan menetapkan konten untuk menyertakan nilai Order Items Count di 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, Orders Count dan Order Items Count, dan 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 Eksplorasi. 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 Orders Count dan Order Items Count, yang dikelompokkan menurut dimensi Users State dan Orders Status. Developer ingin menampilkan tabel kecil kepada pengguna, dan menyembunyikan kolom Orders Status dan Order Items Count dari diagram tabel. Namun, developer tetap ingin pengguna melihat nilai Orders Status dan Order Items Count yang terkait dengan Orders Count tertentu.
HTML berikut dimasukkan di editor Edit Tooltip Content untuk rangkaian Orders Count, dan menetapkan konten untuk menyertakan nilai untuk Orders Status dan Order Items Count di 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 Eksplorasi, tanpa kolom tambahan yang ditampilkan dalam diagram tabel.
Tooltip kustom dengan fungsi Liquid umum
Tooltip kustom mendukung fungsi Liquid umum seperti piping dan menggunakan pernyataan downcast. Dalam contoh ini, diagram kolom menampilkan Orders Count yang dikelompokkan menurut Orders Status. Developer ingin memformat tooltip sehingga pengguna dapat dengan cepat mengidentifikasi perbedaan antara Orders Count untuk Orders Status "CANCELLED" dan Orders Status "COMPLETED".
HTML dan Liquid berikut dimasukkan di editor Edit Tooltip Content untuk rangkaian Orders Count, dan menetapkan nilai tooltip agar muncul berwarna merah untuk jumlah pesanan dengan status "CANCELLED" dan berwarna hijau untuk pesanan dengan status "COMPLETED". 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 Orders Count untuk kolom Orders Status "COMPLETED" menampilkan teks berwarna hijau di tooltip.
Nilai Orders Count untuk kolom Orders Status "CANCELLED" menampilkan teks berwarna merah di tooltip.
Pengguna dapat dengan cepat membedakan antara pesanan yang dibatalkan dan pesanan yang selesai yang ditampilkan dalam diagram kolom.
Referensi terkait
- Pelajari lebih lanjut cara membuat visualisasi.
- Tinjau halaman dokumentasi referensi variabel Liquid untuk mengetahui cara lain menggunakan Liquid di Looker.
- Tinjau halaman dokumentasi sanitasi HTML untuk mengetahui informasi selengkapnya tentang tag HTML yang didukung Looker.