टूलटिप

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

एपीआई का प्लैटफ़ॉर्म

अपने ऐप्लिकेशन में टूलटिप लागू करने के लिए, 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 के साथ इंटरैक्ट करता है, तो टूलटिप "पसंदीदा में जोड़ें" टेक्स्ट के साथ दिखता है. डिवाइस के हिसाब से, उपयोगकर्ता इन तरीकों से टूलटिप को ट्रिगर कर सकते हैं:
  • कर्सर को आइकॉन पर घुमाना
  • मोबाइल डिवाइस पर आइकॉन को दबाकर रखना

नतीजा

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

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

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

कोड के बारे में अहम जानकारी

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

नतीजा

इस उदाहरण से यह नतीजा मिलता है:

अन्य संसाधन

• Material Design: टूलटिप