Skip to main content

सीएसएस टूलटिप जनरेटर कस्टमाइज़ करने योग्य स्थिति, तीर, रंग और शैली के साथ शुद्ध सीएसएस टूलटिप्स बनाएं।

सीएसएस टूलटिप जनरेटर illustration
🎨

सीएसएस टूलटिप जनरेटर

कस्टमाइज़ करने योग्य स्थिति, तीर, रंग और शैली के साथ शुद्ध सीएसएस टूलटिप्स बनाएं।

1

टूलटिप स्थिति चुनें

टूलटिप के लिए ऊपर, नीचे, बाएं या दाएं स्थिति का चयन करें।

2

टूलटिप को अनुकूलित करें

रंग, फ़ॉन्ट आकार, पैडिंग, बॉर्डर त्रिज्या और तीर के आकार को अनुकूलित करें।

3

सीएसएस की प्रतिलिपि बनाएं

टूलटिप का पूर्वावलोकन करें और तीर शैलियों सहित संपूर्ण सीएसएस की प्रतिलिपि बनाएं।

Loading tool...

What Is सीएसएस टूलटिप जनरेटर?

सीएसएस टूलटिप जनरेटर प्योर सीएसएस टूलटिप्स बनाता है जिन्हें कोई जावास्क्रिप्ट की आवश्यकता नहीं होती। टूलटिप्स अतिरिक्त जानकारी प्रदान करते हैं जब उपयोगकर्ता तत्वों पर होवर या फोकस करते हैं, जिससे वे सुलभ वेब इंटरफेस के लिए आवश्यक होते हैं। यह टूल आपको टूलटिप स्थिति (शीर्ष, नीचे, बाएं या दाएं), पृष्ठभूमि और पाठ रंग, फ़ॉन्ट आकार, पैडिंग, बॉर्डर त्रिज्या, और तीर के आकार को अनुकूलित करने देता है। टूलटिप तीर सीएसएस बॉर्डर तरकीबों का उपयोग करके बनाया जाता है, और स्थिति माता-पिता तत्व के सापेक्ष निरपेक्ष स्थिति के साथ संभाली जाती है। उत्पन्न कोड में रैपर, टूलटिप, और तीर प्सेव्डो-एलिमेंट शैलियाँ शामिल हैं, जिससे आपको एक पूर्ण, आत्मनिर्भर टूलटिप समाधान मिलता है। पूर्वावलोकन हमेशा दिखाई देने वाली टूलटिप को दिखाता है ताकि आप अपने स्टाइलिंग परिवर्तनों को असल समय में देख सकें।

Why Use सीएसएस टूलटिप जनरेटर?

  • प्योर सीएसएस समाधान जिसमें जावास्क्रिप्ट निर्भरता की आवश्यकता नहीं है
  • चार स्थिति विकल्प सही ढंग से उन्मुख तीरों के साथ
  • रंगों, आकार और स्थान की पूर्ण अनुकूलन
  • उत्पन्न कोड में रैपερ, टूलटिप और तीर शैलियाँ शामिल हैं

Common Use Cases

आइकन टूलटिप्स

बेहतर पहुंच के लिए आइकन-केवल बटनों में विवरणात्मक टूलटिप्स जोड़ें।

फॉर्म फील्ड हिंट्स

फॉर्म इनपुट पर सहायक संकेत और सत्यापन संदेश प्रदान करें।

नेविगेशन लेबल

होवर पर कॉम्पैक्ट नेविगेशन आइटमों के लिए लेबल दिखाएं।

डेटा विज़ुअलाइज़ेशन

चार्ट तत्वों और डेटा बिंदुओं में अतिरिक्त संदर्भ के लिए टूलटिप्स जोड़ें।

Technical Guide

सीएसएस टूलटिप्स एक अपेक्षाकृत स्थित व्रैप्पर के भीतर निरपेक्ष स्थिति का उपयोग करती हैं। टूलटिप तत्व को शीर्ष/नीचे/बाएं/दाएं और ट्रांसफ़ॉर्म का उपयोग करके केंद्रित किया जाता है। तीर ::after प्सेव्डो-एलिमेंट का उपयोग करके सीएसएस बॉर्डर त्रिभुज तकनीक-तीन तरफ़ा पारदर्शी सीमाएँ और एक रंगीन सीमा निर्धारित करके, एक त्रिभुज आकार बनाया जाता है। टूलटिप को :होवर प्सेव्डो-क्लास का उपयोग करके दिखाया/छुपाया जाता है, डिस्प्ले या दृश्यता नियंत्रण दृश्यता को नियंत्रित करती है। सुलभता के लिए, रोल="टूलटिप" और एरिया-विवरणकृत विशेषताएँ जोड़ने पर विचार करें। व्हाइट-स्पेस: nowrap गुण टूलटिप में पाठ लपेटने से रोकता है। अधिक लंबी सामग्री के लिए, एक अधिकतम-चौड़ाई निर्धारित करें और व्हाइट-स्पेस हटाएं। सुचारू दिखाने/छुपाने एनिमेशन के लिए ऑपासिटी और ट्रांसफ़ॉर्म का उपयोग करके संक्रमण जोड़े जा सकते हैं।

Tips & Best Practices

  • 1
    दुर्घटनाग्रस्त ट्रिगर्स को रोकने के लिए प्रदर्शित करने से पहले एक हल्का विलंब जोड़ें
  • 2
    स्क्रीन रीडर पहुंच के लिए aria-describedby का उपयोग करें
  • 3
    टूलटिप पाठ को संक्षेप में रखें - आदर्श रूप से 150 वर्णों से कम
  • 4
    विलंबित दिखावे के लिए टूलटिप दृश्यता और अपारदर्शिता गुणों में संक्रमण-विलंब जोड़ें

Related Tools

Frequently Asked Questions

Q क्या ये टूलटिप्स मोबाइल पर काम करते हैं?
सीएसएस :होवर टूलटिप्स मोबाइल पर एक टैप के साथ काम करते हैं, लेकिन बेहतर स्पर्श इंटरैक्शन नियंत्रण के लिए जावास्क्रिप्ट का उपयोग करने पर विचार करें।
Q मैं दिखाने से पहले एक विलंब कैसे जोड़ सकता हूं?
एक विलंबित उपस्थिति के लिए टूलटिप दृश्यता और अपारदर्शिता गुणों में संक्रमण-विलंब जोड़ें।
Q क्या मैं होवर पर टूलटिप को दिखने दे सकता हूं?
हां, रैपर के अलावा टूलटिप तत्व पर :होवर स्यूडो-क्लास लागू करें।
Q क्या सीएसएस-केवल टूलटिप्स सुलभ हैं?
पूर्ण पहुंच के लिए एआरआईए विशेषताएं जोड़ें। सीएसएस-केवल समाधान स्क्रीन रीडर के लिए पर्याप्त नहीं हो सकता है।
Q मैं टूलटिप को कटौती से कैसे रोक सकता हूं?
सुनिश्चित करें कि रैपर या एक माता-पिता तत्व में ओवरफ्लो: दृश्यमान है और दृश्य बॉर्डरों के पास स्थिति जांचें।

About This Tool

सीएसएस टूलटिप जनरेटर is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.