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 tab Gaya Explore (atau menu Edit visualisasi untuk Explore klasik) 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 Explore, Anda harus memiliki izin explore, dan akses ke model LookML yang mendasarinya.

Batasan

Fitur Tooltip Kustom memiliki batasan berikut:

Cara menggunakan Tooltip Kustom

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

  1. Buka atau buat kueri Explore dan pilih jenis visualisasi yang didukung.
  2. Klik tab Style di panel Configure untuk mengedit visualisasi. Untuk Explore klasik, klik Edit di tab Visualization Explore untuk membuka editor visualisasi.
  3. Buka menu Deret.
  4. Di bagian Penyesuaian, temukan deret yang ingin Anda tambahi tooltip. Jika ada beberapa deret, luaskan deret yang ingin Anda tambahkan tooltip.
  5. Klik tombol Tooltip Kustom guna mengaktifkan fungsi tooltip kustom untuk deret atau diagram tertentu.
  6. Di bagian Tooltip Kustom, Anda dapat menyesuaikan tampilan dasar tooltip menggunakan opsi yang disediakan:
    • Ukuran Font: Menetapkan ukuran font tooltip.
    • Jenis Font: Menetapkan jenis font tooltip.
    • Radius Batas: Menetapkan kebulatan tepi tooltip. Makin tinggi angkanya, makin 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 Rata Kiri, Rata Tengah, atau Rata Kanan. Rata Kiri adalah setelan default.
  7. Selain atau sebagai alternatif dari opsi sebelumnya, Anda dapat menerapkan opsi gaya visual yang lebih lanjutan dengan mengklik Edit Tooltip Content untuk membuka editor HTML Edit tooltip content.

  8. Di editor Edit Tooltip Content, 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 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 Save di editor HTML, lalu simpan Eksplorasi Anda 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 membantu jika Anda ingin memberikan lebih banyak konteks kepada pengguna tentang poin data yang ditampilkan dalam visualisasi. Misalnya, diagram nilai tunggal hanya menampilkan nilai dari 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 Explore 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 deret 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 Orders Count menampilkan nilai Order Items Count sebesar $54.340, dan nilai Orders Count 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 Explore. 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 masih 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 deret Orders Count, dan menetapkan konten untuk menyertakan nilai 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 Orders Count dalam diagram tabel menampilkan nilai untuk Users State, Orders Status, Orders Count, dan Order Items Count dalam tabel dua kolom.

Pengguna dapat melihat semua data kueri Eksplorasi, tanpa kolom tambahan yang ditampilkan di diagram tabel.

Tooltip kustom dengan fungsi Liquid umum

Tooltip kustom mendukung fungsi Liquid umum seperti piping dan penggunaan pernyataan downcast. Dalam contoh ini, diagram kolom menampilkan Orders Count yang dikelompokkan berdasarkan Orders Status. Developer ingin memformat tooltip agar pengguna dapat dengan cepat mengidentifikasi perbedaan antara Orders Count untuk Orders Status "cancelled" dan Orders Status "complete".

HTML dan Liquid berikut dimasukkan di editor Edit Tooltip Content untuk deret Orders Count, dan menetapkan nilai tooltip agar muncul berwarna merah untuk jumlah pesanan dengan status "cancelled" dan hijau untuk pesanan dengan status "complete". 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 == "complete" %}
  <span style="color:green">{{orders.count}}</span>
{% else %}
  <span style="color:red">{{orders.count}}</span>
{% endif %}

Nilai Orders Count untuk kolom Orders Status "complete" menampilkan teks hijau di tooltip.

Tooltip menampilkan nilai Jumlah Pesanan berwarna hijau di kolom Status Pesanan yang lengkap.

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

Tooltip menampilkan nilai Jumlah Pesanan berwarna hijau di kolom Status Pesanan yang lengkap.

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