Popper.js के साथ ऑन-पेज भाषण बुलबुले बनाएं

जिनके बारे में सभी जानते हैं टूलटिप्स और आपके पास उन्हें बनाने में मदद करने के लिए दर्जनों मुफ्त संसाधन हैं। हालाँकि, कस्टम संदेश बुलबुले या “पॉपर” बहुत उपयोगी भी हैं.

वे होवर घटनाओं तक सीमित नहीं हैं, इसलिए वे लगातार पृष्ठ पर दिखाई दे सकते हैं और अन्य उपयोगकर्ता व्यवहारों के आसपास काम कर सकते हैं.

यदि आप इन्हें बनाना चाहते हैं भाषण बुलबुला poppers अपनी साइट पर तो Popper.js सबसे अच्छा विकल्प है। यह एक मुक्त ओपन-सोर्स प्लगइन है, जिसे आधिकारिक js.org वेबसाइट पर होस्ट किया गया है.

आपको बहुत सारी वेबसाइटों में ये बबल टिप्स मिलेंगे जिनमें जटिल इंटरफेस हैं। कभी-कभी वे पेशकश करेंगे त्वरित सुझाव, walkthroughs, तथा सलाह देना इंटरफ़ेस के लिए नए लोगों के लिए.

Popper.js के साथ, आपको केवल टूलटिप बनाने के लिए उपयोगकर्ता को हॉवर करने की प्रतीक्षा करने की आवश्यकता नहीं है। इसके बजाय, आप एक पॉपर को मजबूर कर सकते हैं कहीं भी दिखाई दें, कुछ भी आकार, कोई भी रंग, गतिशील स्थिति के साथ.

मेरा मतलब देखने के लिए Popper.js डेमो पेज देखें। यह एक के साथ आता है पोजिशनिंग सुविधाओं की विस्तृत सरणी कि आप स्क्रीन स्थान के आधार पर पॉपर स्थिति को ऑटो-फ्लिप करें.

जैसे ही उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है, वे पॉपर बबल खो सकते हैं। इस प्लगइन के साथ, आप कर सकते हैं इसे वापस देखने के लिए मजबूर करें उपयोगकर्ता की स्क्रॉल दिशा के आधार पर इसे ऊपर (या नीचे) फ़्लिप करके.

सीमाओं, तीर की स्थिति, टूलटिप रंगों, और बहुत कुछ पर आपका पूर्ण नियंत्रण है। इस प्लगइन का उल्लेख नहीं है बहुत खूबसूरत है और पूरी तरह से एक्स्टेंसिबल अगर आप मिक्स में अपनी सुविधाओं को जोड़ना चाहते हैं.

यदि आप इसे देखना चाहते हैं तो सभी स्रोत कोड GitHub पर मुफ्त में उपलब्ध हैं.

आरंभ करने के लिए, पर एक नज़र डालें प्रलेखन पृष्ठ एक पूर्ण गाइड के लिए। यह आपको बताता है कि आपको कौन सी स्क्रिप्ट की आवश्यकता होगी, कस्टम पॉपर कैसे सेट करें, और विभिन्न व्यूपोर्ट विकल्पों को कैसे कॉन्फ़िगर करें। हालांकि, सबसे अच्छा संसाधन है मुख्य Popper.js पृष्ठ, डेमो g प्रचुर मात्रा में और कोड के नमूने के साथ.

यदि आप रचनाकार फेडरिको ज़िवलो द्वारा लिखी गई इस ब्लॉग पोस्ट के विकास के बारे में अधिक पढ़ना चाहते हैं.