Tooltip

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Gunakan tooltip untuk menambahkan konteks ke tombol atau elemen UI lainnya. Ada dua jenis tooltip:

• Tooltip biasa: Menjelaskan elemen atau tindakan tombol ikon.
• Tooltip lengkap: Memberikan detail selengkapnya, seperti mendeskripsikan nilai fitur. Juga dapat menyertakan judul, link, dan tombol opsional.

Platform API

Anda dapat menggunakan composable TooltipBox untuk menerapkan tooltip di aplikasi. Anda mengontrol tampilan TooltipBox dengan parameter utama berikut:

• positionProvider: Menempatkan tooltip relatif terhadap konten anchor. Anda biasanya menggunakan penyedia posisi default dari TooltipDefaults, atau Anda dapat menyediakan sendiri jika memerlukan logika pengaturan posisi kustom.
• tooltip: Composable yang berisi konten tooltip. Anda biasanya menggunakan composable PlainTooltip atau RichTooltip.
  • Gunakan PlainTooltip untuk mendeskripsikan elemen atau tindakan tombol ikon.
  • Gunakan RichTooltip untuk memberikan detail selengkapnya, seperti mendeskripsikan nilai fitur. Tooltip lengkap dapat menyertakan judul, link, dan tombol opsional.
• state: Holder status yang berisi logika UI dan status elemen untuk tooltip ini.
• content: Konten composable tempat tooltip ditautkan.

Menampilkan tooltip biasa

Gunakan tooltip biasa untuk menjelaskan elemen UI secara singkat. Cuplikan kode ini menampilkan tooltip biasa di atas tombol ikon, berlabel "Tambahkan ke favorit":

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text(plainTooltipText) }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}
Tooltips.kt

Poin-poin penting tentang kode

• TooltipBox menghasilkan tooltip sederhana dengan teks "Tambahkan ke favorit".
  • TooltipDefaults.rememberPlainTooltipPositionProvider() menyediakan pemosisi default untuk tooltip biasa.
  • tooltip adalah fungsi lambda yang menentukan konten tooltip menggunakan composable PlainTooltip.
  • Text(plainTooltipText) menampilkan teks dalam tooltip.
  • tooltipState mengontrol status tooltip.
• IconButton membuat tombol yang dapat diklik dengan ikon.
  • Icon(...) menampilkan ikon hati di dalam tombol.
  • Saat pengguna berinteraksi dengan IconButton, tooltip akan ditampilkan dengan teks "Tambahkan ke favorit". Bergantung pada perangkat, pengguna dapat memicu tooltip dengan cara berikut:
  • Mengarahkan kursor ke ikon
  • Menekan lama ikon di perangkat seluler

Hasil

Contoh ini menghasilkan tooltip biasa di atas ikon:

Menampilkan tooltip yang kaya

Gunakan tooltip yang kaya untuk memberikan konteks tambahan tentang elemen UI. Contoh ini membuat tooltip kaya multibaris dengan judul yang ditautkan ke Icon:

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}
Tooltips.kt

Poin-poin penting tentang kode

• TooltipBox menangani pemroses peristiwa untuk interaksi pengguna dan memperbarui TooltipState sebagaimana mestinya. Saat TooltipState menunjukkan bahwa tooltip harus ditampilkan, lambda tooltip akan dieksekusi, dan RichTooltip akan ditampilkan. TooltipBox berfungsi sebagai anchor dan penampung untuk konten dan tooltip.
  • Dalam hal ini, konten adalah komponen IconButton, yang menyediakan perilaku tindakan yang dapat diketuk. Saat ditekan lama (di perangkat sentuh) atau diarahkan kursornya (seperti kursor mouse) di mana saja dalam konten TooltipBox, tooltip akan ditampilkan untuk menampilkan informasi selengkapnya.
• Composable RichTooltip menentukan konten tooltip, termasuk judul dan teks isi. TooltipDefaults.rememberRichTooltipPositionProvider() menyediakan informasi pemosisian untuk tooltip yang kaya.

Hasil

Contoh ini menghasilkan tooltip lengkap dengan judul yang dilampirkan ke ikon informasi:

Menyesuaikan tooltip lengkap

Cuplikan kode ini menampilkan tooltip lengkap dengan judul, tindakan kustom, dan caret (panah) kustom yang ditampilkan di atas tombol ikon kamera:

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
                caretSize = DpSize(32.dp, 16.dp)
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

Poin-poin penting tentang kode

• RichToolTip menampilkan tooltip dengan judul dan tindakan tutup.
• Saat diaktifkan, baik dengan menekan lama atau mengarahkan kursor ke konten ToolTipBox dengan pointer mouse, tooltip akan ditampilkan selama sekitar satu detik. Anda dapat menutup tooltip ini dengan mengetuk di tempat lain pada layar atau menggunakan tombol tindakan tutup.
• Saat tindakan tutup dieksekusi, coroutine akan diluncurkan untuk memanggil tooltipState.dismiss. Hal ini memastikan eksekusi tindakan tidak diblokir saat tooltip ditampilkan.
• onClick = coroutineScope.launch { tooltipState.show() } } meluncurkan coroutine untuk menampilkan tooltip secara manual menggunakan tooltipState.show.
• Parameter action memungkinkan penambahan elemen interaktif ke tooltip, seperti tombol.
• Parameter caretSize mengubah ukuran panah tooltip.

Hasil

Contoh ini menghasilkan hal berikut:

Referensi lainnya

• Desain Material: Tooltip