टूलटिप

बटन या यूज़र इंटरफ़ेस (यूआई) के किसी अन्य एलिमेंट के बारे में ज़्यादा जानकारी देने के लिए, टूलटिप का इस्तेमाल करें. टूलटिप दो तरह की होती हैं:

• सामान्य टूलटिप: आइकॉन बटन के एलिमेंट या कार्रवाइयों के बारे में बताती हैं.
• रिच टूलटिप: ज़्यादा जानकारी देती हैं. जैसे, किसी सुविधा की वैल्यू के बारे में बताना. इनमें टाइटल, लिंक, और बटन भी शामिल किए जा सकते हैं. हालांकि, यह ज़रूरी नहीं है.

एपीआई सरफ़ेस

अपने ऐप्लिकेशन में टूलटिप लागू करने के लिए, TooltipBox कंपोज़ेबल का इस्तेमाल किया जा सकता है. इन मुख्य पैरामीटर की मदद से, TooltipBox के दिखने के तरीके को कंट्रोल किया जा सकता है:

• positionProvider: टूलटिप को ऐंकर कॉन्टेंट के हिसाब से रखता है. आम तौर पर, TooltipDefaults से डिफ़ॉल्ट पोज़िशन प्रोवाइडर का इस्तेमाल किया जाता है. हालांकि, अगर आपको पोज़िशनिंग के लिए कस्टम लॉजिक की ज़रूरत है, तो अपना पोज़िशन प्रोवाइडर भी इस्तेमाल किया जा सकता है.
• tooltip: यह ऐसा कंपोज़ेबल है जिसमें टूलटिप का कॉन्टेंट होता है. आम तौर पर, PlainTooltip या RichTooltip कंपोज़ेबल का इस्तेमाल किया जाता है.
  • आइकॉन बटन के एलिमेंट या कार्रवाइयों के बारे में बताने के लिए, PlainTooltip का इस्तेमाल करें.
  • ज़्यादा जानकारी देने के लिए, RichTooltip का इस्तेमाल करें. जैसे, किसी सुविधा की वैल्यू के बारे में बताना. रिच टूलटिप में टाइटल, लिंक, और बटन शामिल किए जा सकते हैं. हालांकि, यह ज़रूरी नहीं है.
• state: यह स्टेट होल्डर है, जिसमें इस टूलटिप के लिए यूज़र इंटरफ़ेस (यूआई) लॉजिक और एलिमेंट की स्थिति होती है.
• content: यह कंपोज़ेबल कॉन्टेंट है, जिससे टूलटिप जुड़ी होती है.

सामान्य टूलटिप दिखाना

किसी यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बारे में कम शब्दों में जानकारी देने के लिए, सामान्य टूलटिप का इस्तेमाल करें. इस कोड स्निपेट में, "पसंदीदा में जोड़ें" लेबल वाले आइकॉन बटन के ऊपर एक सामान्य टूलटिप दिखाई गई है:

@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

कोड के बारे में अहम बातें

• TooltipBox, "पसंदीदा में जोड़ें" टेक्स्ट वाली टूलटिप जनरेट करता है.
  • TooltipDefaults.rememberPlainTooltipPositionProvider() , सामान्य टूलटिप के लिए डिफ़ॉल्ट पोज़िशनिंग उपलब्ध कराता है.
  • tooltip एक लैम्डा फ़ंक्शन है, जो टूलटिप के कॉन्टेंट को तय करता है. इसके लिए, PlainTooltip कंपोज़ेबल का इस्तेमाल किया जाता है.
  • Text(plainTooltipText), टूलटिप में टेक्स्ट दिखाता है.
  • tooltipState , टूलटिप की स्थिति को कंट्रोल करता है.
• IconButton, आइकॉन वाला क्लिक किया जा सकने वाला बटन बनाता है.
  • Icon(...), बटन में दिल का आइकॉन दिखाता है.
  • जब कोई उपयोगकर्ता IconButton के साथ इंटरैक्ट करता है, तो TooltipBox, "पसंदीदा में जोड़ें" टेक्स्ट वाली टूलटिप दिखाता है. डिवाइस के आधार पर, उपयोगकर्ता इन तरीकों से टूलटिप को ट्रिगर कर सकते हैं:
  • कर्सर से आइकॉन पर घुमाकर
  • मोबाइल डिवाइस पर आइकॉन को दबाकर रखकर

नतीजा

इस उदाहरण में, आइकॉन के ऊपर एक सामान्य टूलटिप दिखाई गई है:

रिच टूलटिप दिखाना

यूज़र इंटरफ़ेस (यूआई) के किसी एलिमेंट के बारे में ज़्यादा जानकारी देने के लिए, रिच टूलटिप का इस्तेमाल करें. इस उदाहरण में, कई लाइनों वाली रिच टूलटिप बनाई गई है. इसका टाइटल, 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

कोड के बारे में अहम बातें

• TooltipBox, उपयोगकर्ता के इंटरैक्शन के लिए इवेंट लिसनर को मैनेज करता है और TooltipState को उसी हिसाब से अपडेट करता है. जब TooltipState से यह पता चलता है कि टूलटिप दिखानी है, तब टूलटिप लैम्डा काम करता है. इसके बाद, TooltipBox, RichTooltip दिखाता है. TooltipBox, कॉन्टेंट और टूलटिप, दोनों के लिए ऐंकर और कंटेनर के तौर पर काम करता है.
  • इस मामले में, कॉन्टेंट एक IconButton कॉम्पोनेंट है. इससे टैप की जा सकने वाली कार्रवाई का व्यवहार मिलता है. टच डिवाइसों पर TooltipBox के कॉन्टेंट में कहीं भी दबाकर रखने या माउस पॉइंटर से कर्सर घुमाने पर, ज़्यादा जानकारी दिखाने के लिए टूलटिप दिखेगी.
• RichTooltip कंपोज़ेबल, टूलटिप के कॉन्टेंट को तय करता है. इसमें टाइटल और मुख्य भाग का टेक्स्ट शामिल होता है. TooltipDefaults.rememberRichTooltipPositionProvider() , रिच टूलटिप के लिए पोज़िशनिंग की जानकारी उपलब्ध कराता है.

नतीजा

इस उदाहरण में, जानकारी के आइकॉन से जुड़ा टाइटल वाली रिच टूलटिप दिखाई गई है:

रिच टूलटिप को पसंद के मुताबिक बनाना

इस कोड स्निपेट में, टाइटल, कस्टम कार्रवाइयों, और कैमरे के आइकॉन वाले बटन के ऊपर दिखने वाले कस्टम कैरेट (ऐरो) के साथ एक रिच टूलटिप दिखाई गई है:

@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

कोड के बारे में अहम बातें

• RichTooltip, टाइटल और खारिज करने की कार्रवाई वाली टूलटिप दिखाता है.
• इसे चालू करने के बाद, TooltipBox कॉन्टेंट को दबाकर रखें या उस पर माउस घुमाएं. इसके बाद, टूलटिप करीब एक सेकंड तक दिखती है. इस टूलटिप को खारिज करने के लिए, स्क्रीन पर कहीं और टैप करें या 'खारिज करें' बटन का इस्तेमाल करें.
• खारिज करने की कार्रवाई लागू होने पर, सिस्टम tooltipState.dismiss को कॉल करने के लिए, कोरोटीन लॉन्च करता है. इससे यह पक्का होता है कि टूलटिप दिखने के दौरान, कार्रवाई के लागू होने में कोई रुकावट न आए.
• onClick = coroutineScope.launch { tooltipState.show() } } टूलटिप को मैन्युअल तरीके से दिखाने के लिए, tooltipState.show का इस्तेमाल करके, कोरोटीन लॉन्च करता है.
• action पैरामीटर की मदद से, टूलटिप में इंटरैक्टिव एलिमेंट जोड़े जा सकते हैं. जैसे, बटन.
• caretSize पैरामीटर, टूलटिप के ऐरो का साइज़ बदलता है.

नतीजा

इस उदाहरण में, यह दिखाया गया है:

अन्य संसाधन

• मटीरियल डिज़ाइन: टूलटिप