Info-bulle

Utilisez des info-bulles pour ajouter du contexte à un bouton ou à un autre élément d'interface utilisateur. Il existe deux types d'info-bulles :

• Info-bulles en texte brut : décrivent les éléments ou les actions des boutons avec icône.
• Info-bulles enrichies : fournissent plus de détails, par exemple en décrivant la valeur d'une fonctionnalité. Elles peuvent également inclure un titre, un lien et des boutons facultatifs.

Surface d'API

Vous pouvez utiliser le TooltipBox composable pour implémenter des info-bulles dans votre application. Vous contrôlez l'apparence de TooltipBox à l'aide de ces paramètres principaux :

• positionProvider : place l'info-bulle par rapport au contenu d'ancrage. Vous utilisez généralement un fournisseur de position par défaut à partir de TooltipDefaults, mais vous pouvez fournir le vôtre si vous avez besoin d'une logique de positionnement personnalisée.
• tooltip : composable contenant le contenu de l'info-bulle. Vous utilisez généralement les composables PlainTooltip ou RichTooltip.
  • Utilisez PlainTooltip pour décrire les éléments ou les actions des boutons avec icône.
  • Utilisez RichTooltip pour fournir plus de détails, par exemple en décrivant la valeur d'une fonctionnalité. Les info-bulles enrichies peuvent inclure un titre, un lien et des boutons facultatifs.
• state: détenteur d'état contenant la logique d'interface utilisateur et l'état de l'élément pour cette info-bulle.
• content : contenu composable auquel l'info-bulle est ancrée.

Afficher une info-bulle en texte brut

Utilisez une info-bulle en texte brut pour décrire brièvement un élément d'interface utilisateur. Cet extrait de code affiche une info-bulle en texte brut au-dessus d'un bouton avec icône, libellé "Ajouter aux favoris" :

@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

Points essentiels concernant le code

• TooltipBox génère une info-bulle avec le texte "Ajouter aux favoris".
  • TooltipDefaults.rememberPlainTooltipPositionProvider() fournit un positionnement par défaut pour les info-bulles en texte brut.
  • tooltip est une fonction lambda qui définit le contenu de l'info-bulle à l'aide du PlainTooltip composable.
  • Text(plainTooltipText) affiche le texte dans l'info-bulle.
  • tooltipState contrôle l'état de l'info-bulle.
• IconButton crée un bouton cliquable avec une icône.
  • Icon(...) affiche une icône de cœur dans le bouton.
  • Lorsqu'un utilisateur interagit avec IconButton, TooltipBox affiche l'info-bulle avec le texte "Ajouter aux favoris". Selon l'appareil, les utilisateurs peuvent déclencher l'info-bulle de différentes manières :
  • En passant le curseur sur l'icône
  • En appuyant de manière prolongée sur l'icône sur un appareil mobile

Résultat

Cet exemple génère une info-bulle en texte brut au-dessus d'une icône :

Afficher une info-bulle enrichie

Utilisez une info-bulle enrichie pour fournir un contexte supplémentaire sur un élément d'interface utilisateur. Cet exemple crée une info-bulle enrichie sur plusieurs lignes avec un titre ancré à une 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

Points essentiels concernant le code

• TooltipBox gère les écouteurs d'événements pour les interactions utilisateur et met à jour TooltipState en conséquence. Lorsque TooltipState indique que l'info-bulle doit être affichée, la lambda de l'info-bulle s'exécute et TooltipBox affiche la RichTooltip. La TooltipBox sert d'ancrage et de conteneur pour le contenu et l'info-bulle.
  • Dans ce cas, le contenu est un composant IconButton, qui fournit le comportement d'action cliquable. Lorsque vous appuyez de manière prolongée (sur les appareils tactiles) ou que vous passez le pointeur de la souris sur le contenu de TooltipBox, l'info-bulle s'affiche pour fournir plus d'informations.
• Le composable RichTooltip définit le contenu de l'info-bulle, y compris le titre et le corps du texte. TooltipDefaults.rememberRichTooltipPositionProvider() fournit des informations de positionnement pour les info-bulles enrichies.

Résultat

Cet exemple génère une info-bulle enrichie avec un titre associé à une icône d'informations :

Personnaliser une info-bulle enrichie

Cet extrait de code affiche une info-bulle enrichie avec un titre, des actions personnalisées et un caret (flèche) personnalisé affiché au-dessus d'un bouton avec icône d'appareil photo :

@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)
                        }
                    }
                },
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

Points essentiels concernant le code

• Une RichToolTip affiche une info-bulle avec un titre et une action de fermeture.
• Lorsqu'elle est activée, soit par un appui prolongé, soit en passant le pointeur de la souris sur le contenu de ToolTipBox, l'info-bulle s'affiche pendant environ une seconde. Vous pouvez fermer cette info-bulle en appuyant ailleurs sur l'écran ou en utilisant le bouton d'action de fermeture.
• Lorsque l'action de fermeture s'exécute, le système lance une coroutine pour appeler tooltipState.dismiss. Cela permet de vérifier que l'exécution de l'action n'est pas bloquée pendant l'affichage de l'info-bulle.
• onClick = coroutineScope.launch { tooltipState.show() } } lance une coroutine pour afficher manuellement l'info-bulle à l'aide de tooltipState.show.
• Le paramètre action permet d'ajouter des éléments interactifs à une info-bulle, comme un bouton.
• Le paramètre caretSize modifie la taille de la flèche de l'info-bulle.

Résultat

Cet exemple génère les éléments suivants :

Ressources supplémentaires

• Material Design : Info-bulles