Tooltip kustom

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. Dengan setelan visualisasi Tooltip Kustom, Anda dapat mengonfigurasi tooltip dalam editor visualisasi Jelajahi dengan menggunakan kombinasi setelan UI dan editor HTML yang mendukung template Liquid.

Halaman ini memberikan panduan untuk mengaktifkan dan menggunakan setelan visualisasi Tooltip Kustom di instance Looker (asli) Anda. Halaman ini mencakup bagian-bagian berikut:

Persyaratan pengguna dan instance

Untuk mengakses setelan visualisasi Tooltip Kustom, Anda harus memenuhi persyaratan berikut:

  • Instance Looker (asli) Anda harus menjalankan Looker 26.4 atau yang lebih baru.
  • Untuk membuat tooltip kustom di Eksplorasi, Anda harus memiliki izin explore, dan akses ke model LookML pokok.

Batasan

Fitur pratinjau Tooltip Kustom memiliki batasan berikut:

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:

  1. Buka atau buat kueri Jelajahi dan pilih jenis visualisasi yang didukung.
  2. Klik Edit di tab Visualisasi Jelajahi untuk membuka editor visualisasi.
  3. Klik tab Seri.
  4. Di bagian Penyesuaian, cari deret yang ingin Anda tambahkan tooltip-nya. Jika ada beberapa deret, perluas deret yang ingin Anda tambahi tooltip.
  5. Klik tombol Tooltip Kustom untuk mengaktifkan fungsi tooltip kustom untuk deret atau diagram tertentu tersebut.
  6. 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.
    • Radius Batas: Menetapkan pembulatan tepi tooltip. Semakin tinggi angkanya, semakin bulat tepi tooltip.
    • Bayangan Kotak: Menetapkan bayangan kotak tooltip.
    • Warna Font: Menetapkan warna font tooltip.
    • Warna Latar Belakang: Menetapkan warna latar belakang tooltip.
    • Warna Batas: Menetapkan warna batas tooltip.
    • Perataan Teks: Menetapkan perataan font tooltip. Pilih Ratakan Kiri, Ratakan Tengah, atau Ratakan Kanan. Sejajarkan Kiri adalah setelan default.
  7. 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.

  8. 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.

  9. 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.

  10. 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 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>

Tooltip untuk diagram nilai tunggal Jumlah Pesanan menampilkan nilai Jumlah Item Pesanan sebesar $54.340, dan nilai Jumlah Pesanan sebesar 39.189.

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 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 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>

Tooltip untuk nilai Jumlah Pesanan dalam diagram tabel menampilkan nilai untuk Negara Bagian Pengguna, Status Pesanan, Jumlah Pesanan, dan Jumlah Item Pesanan dalam tabel dua kolom.

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.

Tooltip menampilkan nilai Jumlah Pesanan berwarna hijau di kolom Status Pesanan SELESAI.

Nilai Jumlah Pesanan untuk kolom Status Pesanan "DIBATALKAN" menampilkan teks merah di tooltip.

Tooltip menampilkan nilai Jumlah Pesanan berwarna hijau di kolom Status Pesanan SELESAI.

Pengguna dapat dengan cepat membedakan pesanan yang dibatalkan dan diselesaikan yang ditampilkan dalam diagram batang.