Spec-Zone.ru › Kotlin 2

Всплывающие подсказки

Вы можете добавить всплывающую подсказку к любому компоненту с помощью компонуемой функции TooltipArea. TooltipArea похож на компонент Box и может отображать всплывающую подсказку.

Примеры в этом руководстве — запускаемые настольные приложения. Чтобы попробовать один из них:

  1. Создайте проект Compose Multiplatform с помощью плагина Kotlin Multiplatform для IDE или онлайн-мастера.

  2. Откройте файл точки входа настольного приложения. Например, desktopApp/src/main/kotlin/com/example/my_desktop_app/main.kt.

  3. Замените его содержимое приведённым примером.

Компонуемая функция TooltipArea имеет следующие основные параметры:

  • tooltip — содержимое всплывающей подсказки, задаваемое компонуемой функцией.

  • tooltipPlacement — задаёт положение всплывающей подсказки. Можно указать якорь (указатель мыши или компонент), смещение и выравнивание.

  • delayMillis — время в миллисекундах, по истечении которого отображается всплывающая подсказка. Значение по умолчанию — 500 мс.

В следующем примере показано, как создать простое окно со списком кнопок, каждая из которых обёрнута в TooltipArea. При наведении указателя на кнопку появится всплывающая подсказка с её названием. Добавьте этот код в файл main.kt в jvmMain/kotlin:

import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.TooltipArea import androidx.compose.foundation.TooltipPlacement import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Button import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.shadow import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp import androidx.compose.ui.window.WindowState import androidx.compose.ui.window.singleWindowApplication @OptIn(ExperimentalFoundationApi::class) fun main() = singleWindowApplication( WindowState(width = 300.dp, height = 350.dp), title = "Tooltip Example" ) { val buttons = listOf("Button A", "Button B", "Button C", "Button D", "Button E", "Button F") Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) { buttons.forEachIndexed { index, name -> // Wrap the button in TooltipArea TooltipArea( tooltip = { // Composable tooltip content: Surface( modifier = Modifier.shadow(4.dp), color = Color(255, 255, 210), shape = RoundedCornerShape(4.dp) ) { Text( text = "Tooltip for $name", modifier = Modifier.padding(10.dp) ) } }, modifier = Modifier.padding(start = 40.dp), delayMillis = 600, // In milliseconds tooltipPlacement = TooltipPlacement.CursorPoint( alignment = Alignment.BottomEnd, offset = if (index % 2 == 0) DpOffset( (-16).dp, 0.dp ) else DpOffset.Zero // Tooltip offset ) ) { Button(onClick = {}) { Text(text = name) } } } } }
Tooltips

Что дальше?

Изучите руководства по другим компонентам для настольных приложений.

21 мая 2026
Полосы прокруткиКонтекстные меню

© 2010–2026 JetBrains s.r.o. and Kotlin Programming Language contributors
Licensed under the Apache License, Version 2.0.
https://kotlinlang.org/docs/multiplatform/compose-desktop-tooltips.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API