Skip to content

Commit 27aaca6

Browse files
jakerosemanjakeroseman
committed
Tooltip component examples
1 parent 68fef6e commit 27aaca6

File tree

3 files changed

+166
-1
lines changed

3 files changed

+166
-1
lines changed

‎compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import com.example.compose.snippets.components.ScaffoldExample
4848
import com.example.compose.snippets.components.SliderExamples
4949
import com.example.compose.snippets.components.SwitchExamples
5050
import com.example.compose.snippets.components.TimePickerExamples
51+
import com.example.compose.snippets.components.TooltipExamples
5152
import com.example.compose.snippets.graphics.ApplyPolygonAsClipImage
5253
import com.example.compose.snippets.graphics.BitmapFromComposableFullSnippet
5354
import com.example.compose.snippets.graphics.BrushExamplesScreen
@@ -113,6 +114,7 @@ class SnippetsActivity : ComponentActivity() {
113114
TopComponentsDestination.DatePickerExamples -> DatePickerExamples()
114115
TopComponentsDestination.CarouselExamples -> CarouselExamples()
115116
TopComponentsDestination.MenusExample -> MenusExamples()
117+
TopComponentsDestination.TooltipExamples -> TooltipExamples()
116118
}
117119
}
118120
}

‎compose/snippets/src/main/java/com/example/compose/snippets/components/Tooltips.kt‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
package com.example.compose.snippets.components
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.foundation.layout.fillMaxSize
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.material.icons.Icons
9+
import androidx.compose.material.icons.filled.Camera
10+
import androidx.compose.material.icons.filled.Favorite
11+
import androidx.compose.material.icons.filled.Info
12+
import androidx.compose.material3.ExperimentalMaterial3Api
13+
import androidx.compose.material3.Icon
14+
import androidx.compose.material3.IconButton
15+
import androidx.compose.material3.PlainTooltip
16+
import androidx.compose.material3.RichTooltip
17+
import androidx.compose.material3.Text
18+
import androidx.compose.material3.TextButton
19+
import androidx.compose.material3.TooltipBox
20+
import androidx.compose.material3.TooltipDefaults
21+
import androidx.compose.material3.rememberTooltipState
22+
import androidx.compose.runtime.Composable
23+
import androidx.compose.ui.Alignment
24+
import androidx.compose.ui.Modifier
25+
import androidx.compose.ui.text.style.TextAlign
26+
import androidx.compose.ui.tooling.preview.Preview
27+
import androidx.compose.ui.unit.DpSize
28+
import androidx.compose.ui.unit.dp
29+
30+
@Composable
31+
fun TooltipExamples(){
32+
Text(
33+
"Long press an icon to see the tooltip.",
34+
modifier = Modifier.fillMaxWidth().padding(16.dp),
35+
textAlign = TextAlign.Center
36+
)
37+
Row(
38+
horizontalArrangement = Arrangement.SpaceEvenly,
39+
verticalAlignment = Alignment.CenterVertically,
40+
modifier = Modifier.fillMaxSize()
41+
) {
42+
PlainTooltipExample()
43+
RichTooltipExample()
44+
AdvancedRichTooltipExample()
45+
}
46+
}
47+
48+
@OptIn(ExperimentalMaterial3Api::class)
49+
// [START android_compose_components_plaintooltipexample]
50+
@Composable
51+
fun PlainTooltipExample(
52+
modifier: Modifier = Modifier,
53+
plainTooltipText: String = "Add to favorites"
54+
) {
55+
TooltipBox(
56+
modifier = modifier,
57+
positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
58+
tooltip = {
59+
PlainTooltip { Text(plainTooltipText) }
60+
},
61+
state = rememberTooltipState()
62+
) {
63+
IconButton(onClick = { /* Icon button's click event */ }) {
64+
Icon(
65+
imageVector = Icons.Filled.Favorite,
66+
contentDescription = "Localized Description"
67+
)
68+
}
69+
}
70+
}
71+
// [END android_compose_components_plaintooltipexample]
72+
73+
@Preview
74+
@Composable
75+
private fun PlainTooltipSamplePreview() {
76+
PlainTooltipExample()
77+
}
78+
79+
@OptIn(ExperimentalMaterial3Api::class)
80+
// [START android_compose_components_richtooltipexample]
81+
@Composable
82+
fun RichTooltipExample(
83+
modifier: Modifier = Modifier,
84+
richTooltipSubheadText: String = "Rich Tooltip",
85+
richTooltipText: String = "Rich tooltips supports multiple lines of informational text."
86+
) {
87+
val tooltipState = rememberTooltipState(isPersistent = true)
88+
89+
TooltipBox(
90+
modifier = modifier,
91+
positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
92+
tooltip = {
93+
RichTooltip(
94+
title = { Text(richTooltipSubheadText) }
95+
) {
96+
Text(richTooltipText)
97+
}
98+
}, state = tooltipState
99+
) {
100+
IconButton(onClick = { /* Icon button's click event */ }) {
101+
Icon(
102+
imageVector = Icons.Filled.Info,
103+
contentDescription = "Localized Description"
104+
)
105+
}
106+
}
107+
}
108+
// [END android_compose_components_richtooltipexample]
109+
110+
@Preview
111+
@Composable
112+
private fun RichTooltipSamplePreview() {
113+
RichTooltipExample()
114+
}
115+
116+
@OptIn(ExperimentalMaterial3Api::class)
117+
// [START android_compose_components_advancedrichtooltipexample]
118+
@Composable
119+
fun AdvancedRichTooltipExample(
120+
modifier: Modifier = Modifier,
121+
richTooltipSubheadText: String = "Custom Rich Tooltip",
122+
richTooltipText: String = "Rich tooltips supports multiple lines of informational text.",
123+
richTooltipActionText: String = "Dismiss"
124+
) {
125+
val tooltipState = rememberTooltipState(isPersistent = true)
126+
127+
TooltipBox(
128+
modifier = modifier,
129+
positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
130+
tooltip = {
131+
RichTooltip(
132+
title = { Text(richTooltipSubheadText) },
133+
action = {
134+
Row {
135+
TextButton(onClick = { /* Do something... */ }) {
136+
Text(richTooltipActionText)
137+
}
138+
TextButton(onClick = { /* Do something... */ }) {
139+
Text("Learn more")
140+
}
141+
}
142+
},
143+
caretSize = DpSize(32.dp, 16.dp)
144+
) {
145+
Text(richTooltipText)
146+
}
147+
},
148+
state = tooltipState
149+
) {
150+
IconButton(onClick = { /* Icon button's click event */ }) {
151+
Icon(imageVector = Icons.Filled.Camera, contentDescription = "Localized Description")
152+
}
153+
}
154+
}
155+
// [END android_compose_components_advancedrichtooltipexample]
156+
157+
@Preview
158+
@Composable
159+
private fun RichTooltipWithCustomCaretSamplePreview() {
160+
AdvancedRichTooltipExample()
161+
}
162+

‎compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,6 @@ enum class TopComponentsDestination(val route: String, val title: String) {
4545
TimePickerExamples("timePickerExamples", "Time Pickers"),
4646
DatePickerExamples("datePickerExamples", "Date Pickers"),
4747
CarouselExamples("carouselExamples", "Carousel"),
48-
MenusExample("menusExamples", "Menus")
48+
MenusExample("menusExamples", "Menus"),
49+
TooltipExamples("tooltipExamples", "Tooltips")
4950
}

0 commit comments

Comments
 (0)