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 Custom Tooltip, Anda dapat 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 setelan visualisasi Custom Tooltips di instance Looker (original). Halaman ini mencakup bagian-bagian berikut:

Persyaratan pengguna dan instance

Untuk mengakses setelan visualisasi Custom Tooltips, Anda harus memenuhi persyaratan berikut:

  • Instance Looker (original) 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 yang mendasarinya.

Batasan

Fitur pratinjau Custom Tooltips memiliki batasan berikut:

  • Tooltip kustom didukung untuk sebagian besar jenis visualisasi, kecuali yang berikut:
  • 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 terperinci 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.

Cara menggunakan Custom Tooltips

Jika memiliki izin yang sesuai, Anda dapat menyesuaikan tooltip untuk seri dalam visualisasi Eksplorasi. Untuk menyesuaikan tooltip, ikuti langkah-langkah berikut:

  1. Buka atau buat kueri Eksplorasi dan pilih jenis visualisasi yang didukung.
  2. Klik Edit di tab Visualisasi Eksplorasi untuk membuka editor visualisasi.
  3. Klik tab Seri.
  4. Di bagian Penyesuaian, temukan seri yang ingin Anda tambahkan tooltip. Jika ada beberapa seri, luaskan seri yang ingin Anda tambahkan tooltip.
  5. Klik tombol Custom Tooltip untuk mengaktifkan fungsi tooltip kustom untuk seri atau diagram tertentu.
  6. 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.
    • Border Radius: 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 Align Left, Align Center, atau Align Right. Align Left adalah setelan default.
  7. 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.

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

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

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

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, Orders Count dan Order Items Count, 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 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 seri 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>

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 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 seri 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 pemformatan 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.

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

Nilai Orders Count untuk kolom Orders Status "CANCELLED" menampilkan teks berwarna merah di tooltip.

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

Pengguna dapat dengan cepat membedakan antara pesanan yang dibatalkan dan pesanan yang selesai yang ditampilkan dalam diagram kolom.