मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...
फक्त मजकूर किंवा प्रतिमेवर माउस फिरवून अतिरिक्त माहिती प्रदर्शित करण्याचा टूलटिप हा एक उत्तम मार्ग आहे. त्यांचा वापर केला जाऊ शकतो, उदाहरणार्थ, चित्रांची नावे, लिंक्सचे वर्णन किंवा तुमच्या संसाधनाच्या वापरकर्त्यासाठी उपयुक्त असणारी कोणतीही माहिती प्रदर्शित करण्यासाठी. आणि डिझाइन टेम्पलेट तोडण्याची गरज नाही.
या ट्युटोरियलमध्ये, आम्ही HTML आणि CSS वापरून साध्या टूलटिप्स कशा तयार करायच्या ते पाहू जे लिंकच्या शीर्षक विशेषताची सामग्री प्रदर्शित करेल.
चला वर्गासाठी मूळ शैली सेट करूया टूलटिप:
टूलटिप (प्रदर्शन: इनलाइन; स्थिती: सापेक्ष;)
आता टूलटिप एका ओळीवर रिलेटिव पोझिशनिंग वापरून लिंकसह प्रदर्शित होईल. आता टूलटिप ब्लॉकसाठी गोलाकार कोपरे परिभाषित करू आणि त्यास दुव्याच्या शीर्षस्थानी ठेवा:
टूलटिप:होव्हर:नंतर(पार्श्वभूमी: #333; पार्श्वभूमी: rgba(0,0,0,.8); सीमा-त्रिज्या: 5px; तळ: 26px; रंग: #fff; सामग्री: attr(शीर्षक); डावीकडे: 20 %; पॅडिंग: 5px 15px; 98;
आम्ही :hover स्यूडो-क्लास वापरतो, जो एक घटक निवडतो जेव्हा माउस त्याच्यावर फिरतो आणि :after स्यूडो-क्लास, जो निवडलेल्या घटकानंतर सामग्री जोडतो. पार्श्वभूमी अंशतः पारदर्शक वर सेट केली आहे आणि RGBA कलर फॉरमॅटला सपोर्ट न करणाऱ्या ब्राउझरसाठी आम्ही पार्श्वभूमीचा रंग राखाडी वर सेट करतो.
गोलाकार कोपरे सीमा-त्रिज्या विशेषता वापरून तयार केले जातात. मजकूराचा रंग पांढरा वर सेट करा. शेवटी, आम्ही टूलटिप ब्लॉक ठेवतो आणि पॅडिंग जोडतो.
शैली आणि स्थिती परिभाषित करण्याव्यतिरिक्त, आम्ही सामग्री गुणधर्म सेट करतो:
सामग्री: attr(शीर्षक);
हा गुणधर्म तुम्हाला सामग्री घालण्याची परवानगी देतो, जी स्ट्रिंग किंवा घटक विशेषता असू शकते. या प्रकरणात, आम्ही दुव्याचे शीर्षक गुणधर्म वापरतो.
उपयुक्त संसाधनाचा दुवा
पूर्ण करण्यासाठी, तुम्हाला टूलटिपच्या तळाशी एक बाण जोडण्याची आवश्यकता आहे. आम्ही फ्रेमसाठी स्यूडो-क्लास:पूर्वी आणि शैली वापरतो:
टूलटिप:होव्हर:पूर्वी( सीमा: घन; सीमा-रंग: #333 पारदर्शक; सीमा-रुंदी: 6px 6px 0 6px; तळ: 20px; सामग्री: ""; डावीकडे: 50%; स्थिती: परिपूर्ण; z-इंडेक्स: 99 ;)
बाण तयार करण्यासाठी, आम्ही बॉर्डर युक्ती वापरली: डाव्या आणि उजव्या सीमेचा रंग पारदर्शक करण्यासाठी सेट करा आणि सीमेची रुंदी नियंत्रित करा. बाण देखील टूलटिप अंतर्गत स्थित आहे.
लेआउट गुरूंना या पोस्टमध्ये स्वत:साठी काही नवीन सापडण्याची शक्यता नाही. हे पोस्ट नवशिक्या लेआउट डिझायनर्ससाठी अधिक आहे ज्यांना, माझ्यासारख्या, युनिव्हर्सल टूलटिप्स तयार करण्यात आणि स्टाइल करण्यात समस्या होत्या.
अलीकडे, जेव्हा मी एक छोटासा ब्लॉग बनवत होतो, तेव्हा मला स्टायलिश बनवण्याचे काम होते, परंतु त्याच वेळी साध्या टूलटिप्स होत्या. टूलटिपसाठी स्वतंत्र div कंटेनर तयार करण्याचे किंवा शुद्ध CSS सह टूलटिप तयार करण्याचे वेगवेगळे मार्ग वापरून पाहिल्यानंतर, मला एक सार्वत्रिक उपाय सापडला जो कोडमध्ये गोंधळ करणार नाही, क्रॉस-ब्राउझर सुसंगत असेल आणि त्याच वेळी अंमलबजावणी करणे खूप सोपे असेल.
या सोप्या समस्येचे निराकरण करण्याच्या माझ्या पद्धतीमध्ये स्वारस्य असलेल्या कोणालाही मी मांजरीच्या खाली विचारतो.
टूलटिप लिंक
तुम्ही सूचीवरून आधीच लक्षात घेतले असेल की, मी कमी सीएसएस प्रीप्रोसेसर वापरत आहे.
आम्ही CSS शैली आणि स्क्रिप्ट वेगळ्या फायलींमध्ये समाविष्ट केल्या आहेत. आमच्याकडे एक लिंक आणि एक div ब्लॉक देखील आहे, जो टूलटिपसाठी कंटेनर असेल.
HTML5 तपशील डेटा-विशेषता प्रकाराच्या सानुकूल विशेषता वापरण्याची परवानगी देते, जे घटक किंवा ब्लॉकबद्दल काही माहिती संचयित करू शकते. हे डेटा विशेषतांमध्ये आहे की आम्ही टूलटिपचा मजकूर जतन करू.
दुवा
स्टोरेजसाठी मी डेटा-टूलटिप विशेषता वापरतो.
आम्ही HTML सह पूर्ण केले आहे - आम्ही CSS शैलीकडे जाऊ शकतो मी कमी घटक लायब्ररी वापरतो आणि प्रत्येकाला त्याची शिफारस करतो, म्हणून मी हे फ्रेमवर्क वापरून काही गुणधर्म लिहीन.
@import "css/elements.less"; #tooltip ( z-index: 9999; स्थिती: absolute; प्रदर्शन: none; top:0px; left:0px; पार्श्वभूमी-रंग: #000; पॅडिंग: 5px 10px 5px 10px; रंग: पांढरा; .अपारदर्शकता(0.5); . गोलाकार (5px)
सूचीवरून हे स्पष्ट आहे की पहिल्या ओळीत आम्ही LE कनेक्ट करतो, div#tooltip ब्लॉकला निरपेक्ष स्थितीवर सेट करतो आणि ते लपवतो. पुढे आम्ही ब्लॉकला बॅकग्राउंड कलर आणि टेक्स्ट कलर देतो, कोपऱ्यांवर गोल करतो (5px) आणि पारदर्शकता मूल्य 50% वर सेट करतो - jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(("शीर्ष" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show(); mouseout(function () ( $("#tooltip ").लपवा() .मजकूर("").css(("शीर्ष" : 0, "डावीकडे" : 0 )); )); ));// तयार समाप्त.
आता आम्ही डेटा-टूलटिप विशेषता असलेले सर्व घटक सिलेक्शनमध्ये जोडतो आणि जेव्हा आम्ही इच्छित घटकावर माउसने फिरवतो, तेव्हा आम्हाला टूलटिप मूल्य मिळते आणि ते व्हेरिएबलमध्ये साठवले जाते. पुढे, आम्ही #tooltip ब्लॉकमध्ये इशारा मजकूर जोडतो, त्यास पृष्ठाच्या काठावरुन कर्सर निर्देशांक देतो + 5 px आणि शेवटी योग्य ठिकाणी टूलटिपसह ब्लॉक प्रदर्शित करतो. माउसने घटक सोडल्यानंतर, आम्ही #tooltip ब्लॉक लपवतो, त्यातील सामग्री साफ करतो आणि 0;0; वर परत करतो.
इतकंच!
परिणामी, आम्हाला असे काहीतरी मिळेल: डेमो
या सोप्या स्क्रिप्टबद्दल धन्यवाद, डेटा-टूलटिप विशेषता असलेल्या पृष्ठावरील सर्व घटकांना टूलटिप प्राप्त होईल.
आपण लक्ष दिल्याबद्दल धन्यवाद!
किंवा कोणत्या HTML घटकांमध्ये टूलटिप असू शकतात
धड्यात हायपरटेक्स्ट मार्कअप क्षेत्रातील टूलटिपची उदाहरणे आहेत.
डावीकडील मेनूमध्ये तुम्हाला आधुनिक आणि अतिशय तपशीलवार HTML ट्यूटोरियल सापडतील.
ते तुम्हाला तुमची वेबसाइट सुरवातीपासून तयार करण्यास अनुमती देतील, परंतु आतासाठी, थोडे खाली पहा.
या प्रकरणात आपण पाहू
HTML सूचनांसह पुढे जाण्यापूर्वी, मी तुम्हाला माहिती वाचा असे सुचवितो.
हे मनोरंजक असू शकते.
सुरुवातीच्या इंटरनेटचे मुख्य ट्रेंड
1997 पासून, पहिल्या ब्राउझरच्या आगमनानंतर, काही ग्राहक इंटरनेटच्या विविध क्षेत्रांमध्ये तसेच माहिती तंत्रज्ञान आणि संगणक हार्डवेअर समर्थन क्षेत्रात सक्रियपणे तज्ञ आहेत. बरेच वापरकर्ते वेब डिझायनर बनतात, वैयक्तिक आणि कॉर्पोरेट वेबसाइट तयार करण्यास सुरवात करतात आणि स्थानिक संगणक नेटवर्कच्या निर्मितीमध्ये भाग घेतात. अशा प्रकारे ते स्वतःला शिक्षित करतात. ही स्थिती आजतागायत टिकून आहे. आज वर्ल्ड वाइड वेबद्वारे ज्ञान मिळवणे खूप फॅशनेबल आणि सोयीस्कर आहे. आज आणि विशेषतः नंतर, गेल्या शतकाच्या 90 च्या दशकाच्या मध्यात, पूर्वीच्या समाजवादी देशांना प्रोग्रामिंग तज्ञांची आवश्यकता आहे. मागणी असेल तर पुरवठा होईल. प्रोग्रामर सामूहिकपणे प्रशिक्षित केले जातात - काही विद्यापीठांमध्ये, काही संगणक स्क्रीनसमोर घरी. या विलक्षण काळात, प्रोग्रामिंग मंच खूप लोकप्रिय होत आहेत, जिथे तरुण आणि नसलेले तज्ञ त्यांचे अनुभव आणि कल्पनांची देवाणघेवाण करतात.
HTML लिंकसाठी टूलटिपयेथे सर्व काही जवळपास सारखेच आहे: title="" विशेषता परिभाषित करते HTML टूलटिप .
प्रतिमेचा alt="" पर्यायी मजकूर निर्दिष्ट करते जो प्रतिमा प्रदर्शित न झाल्यास पृष्ठावर दर्शविला जाईल.
HTML टूलटिप आणि वैकल्पिक मजकूर गोंधळात टाकू नका, कारण त्या पूर्णपणे भिन्न गोष्टी आहेत.
मजकूरासाठी HTML टूलटिपHTML टूलटिप पृष्ठावरील जवळजवळ प्रत्येक घटकाला लागू होते.
वेगळ्या पद्धतीने सांगायचे तर, वरील उदाहरणांवरून आपण परिचित असलेल्या title="" मध्ये सर्व स्तरांचे हेडिंग टॅग, परिच्छेद टॅग, ब्लॉक, प्रतिमा आणि रेखीय घटक असू शकतात. आणि इतर.
मला प्रथम-स्तरीय शीर्षक टॅग आणि लिंक्समध्ये title="" विशेषता ठेवण्याचा अनुभव आहे.
वैयक्तिकरित्या, वेबसाइट मजकूर शोध इंजिन ऑप्टिमायझेशनमधील अपरिहार्य हौशी प्रयोगांचा एक भाग म्हणून, नैसर्गिकरित्या, मी टूलटिप वापरतो. माझे प्रयोग कितपत यशस्वी झाले हे मी ठरवत नाही. प्रामाणिकपणे सांगायचे तर, अशा ऑप्टिमायझेशनचा परिणाम शोधणे कठीण आहे, परंतु कीवर्ड आणि वाक्यांशांसह ते जास्त करणे खूप सोपे आहे. म्हणून, सावधगिरी बाळगा आणि आपल्या जाहिरातीमध्ये ते जास्त करू नका, कारण आपल्याला नेहमी शोध इंजिनद्वारे शिक्षा होण्याचा धोका असतो.
या लेखात मला कोणत्याही लेआउटमध्ये असे वैशिष्ट्य आयोजित करण्यासाठी अनेक पर्यायांवर चर्चा करायची आहे. तसे, माझ्या वेबसाइटवर माझ्याकडे आधीपासूनच अशा अंमलबजावणीचे जिवंत उदाहरण आहे. तुम्ही या पृष्ठावरील टिप्पण्यांवर खाली स्क्रोल केल्यास आणि टिप्पणीच्या तारखेवर फिरल्यास, नेमके काय बोलले जात आहे ते लगेच स्पष्ट होईल. बरं, अद्याप कोणत्याही टिप्पण्या नसल्यास, आपण एकाच वेळी एक सोडू शकता.
मला टूलटिप लागू करण्यासाठी दोन मुख्य पद्धती दिसत आहेत, हे हॉवरवर आहे, जे सर्वात लोकप्रिय देखील आहे आणि जेव्हा तुम्ही एखाद्या घटकावर क्लिक करता तेव्हा कमी लोकप्रिय आहे. आपण एखाद्या घटकावर फिरता तेव्हा नैसर्गिकरित्या टूलटिप दिसण्यापासून प्रारंभ करूया.
या लेखात, मला वाटले की मी सर्वात आदिम गोष्टीपासून सुरुवात करेन, शीर्षक वापरून टूलटिप प्रदर्शित करेन, जे कोणत्याही प्रकारे फॉरमॅट केले जाऊ शकत नाही, परंतु मला वाटते की तुम्ही ते वगळू शकता, कारण ते आधीच स्पष्ट आहे. जर वरील तुमच्यासाठी पूर्णपणे स्पष्ट नसेल, तर मला वाटते की व्हिडिओचा अभ्यास केल्यानंतर सर्व काही अधिक स्पष्ट होईल.
होव्हरवर डिझाइनसह एक सोपा मार्ग.मी चुकवलेल्या पद्धतीपेक्षा हे अधिक क्लिष्ट नाही. फक्त शीर्षक विशेषता ऐवजी मी डेटा-शीर्षक आणि css शैली वापरून डिझाइन वापरेन. वास्तविक, मी html कोड खाली देतो:
?
/* आम्ही बार स्वतः डिझाइन करण्यासाठी आफ्टर स्यूडो-एलिमेंट वापरतो, परंतु त्याच वेळी आम्ही ते लपवतो, कारण ते फक्त hover */ .hover:after (content: attr(data-title); display: none वर दिसले पाहिजे. ;स्थिती: 130%; 0px; 5px; -moz-box-छाया box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); फॉन्ट-आकार: 12px;) / * मालमत्ता जोडा जेणेकरून जेव्हा तुम्ही एखाद्या घटकावर फिरता तेव्हा एक संकेत बॉक्स दिसेल */ .hover:hover:after(display: block;)
येथे मी आपले लक्ष वेधून घेऊ इच्छितो की हे केवळ डिझाइन गुणधर्मांचे उदाहरण आहे. आपण आपल्या इच्छेनुसार नैसर्गिकरित्या डायचे स्वरूप डिझाइन करू शकता.
होवर वर टूलटिप.हे वैशिष्ट्य लागू करण्याचा हा कदाचित सर्वात लोकप्रिय मार्ग आहे. किमान तेच मी बहुतेकदा वापरतो.
? ही एक डिझाइन टिप आहे
या उदाहरणात, मला काही विशेष दिसत नाही, परंतु अधिक, परंतु डेटा-शीर्षक गुणधर्म न वापरता देखील परिणाम चांगला होईल. या प्रकरणातील कंटेनर आमच्या घटकांसाठी रॅपर म्हणून काम करते जे टूलटिप लागू करण्यासाठी वापरले जाईल. आणि कंटेनरच्या सापेक्ष डाय स्वतः देखील ठेवला जाईल.
/* कंटेनरवर सापेक्ष पोझिशनिंग सेट करा */ .ब्लॉक(स्थिती:सापेक्ष;) /* डीफॉल्ट लपलेले घटक डिझाइन करा */ .लपलेले (प्रदर्शन: काहीही नाही; स्थिती: परिपूर्ण; तळ: 130%; डावीकडे: 0px; पार्श्वभूमी-रंग : # fff; टेक्स्ट-संरेखित: 0 1px rgba (0,0,0,.16); सावली: 0 1px 1px rgba(0,0,0,.16); फॉन्ट-आकार: 12px;) /* लपविलेल्या घटकासाठी अतिरिक्त सजावट (पर्यायी) */ .hover + .hidden:before (सामग्री: " "; स्थिती: 98% डावीकडे: 5px सीमा: 0 : 7px ठोस #fff; बॉर्डर-रंग: #fff पारदर्शक पारदर्शक; z-इंडेक्स: 2;) /* लपविलेल्या घटकासाठी अतिरिक्त सजावट (पर्यायी) */ .hover + .hidden :after (सामग्री: " "; स्थिती: पूर्ण: 10% डावा: सीमा-रुंदी: 0; सीमा: 7px घन पारदर्शक; सीमा-उजवीकडे: 7px घन #ffff; बॉर्डर-रंग: rgba(0,0,0,.16) पारदर्शक पारदर्शक पारदर्शक; z-इंडेक्स: 1;) /* होवर */ .hover:hover + .hidden (डिस्प्ले: ब्लॉक;) वर लपलेल्या घटकाचे स्वरूप
जेव्हा तुम्ही कर्सर फिरवता तेव्हा टूलटिप प्रदर्शित करण्यासाठी हे दोन पर्याय तुमच्या वेबसाइटवर वापरले जाऊ शकतात.
आणखी दोन पद्धती आहेत, परंतु त्या जवळजवळ सारख्याच आहेत, त्याशिवाय जेव्हा तुम्ही साइटवर नेहमी प्रदर्शित होणाऱ्या घटकावर क्लिक कराल तेव्हा घटक दिसून येईल.
नोंदणीसह एक सोपा मार्ग, क्लिकवर.क्लिकच्या बाबतीत, कोड अगदी सारखाच दिसेल. फक्त एक गोष्ट म्हणजे सोयीसाठी मी काही घटकांचा वर्ग बदलला. होव्हर ऐवजी फोकस स्यूडो-क्लास देखील वापरला जातो. येथे हे देखील लक्षात घेण्यासारखे आहे की ही पद्धत कार्य करण्यासाठी, त्यास , म्हणजे हायपरलिंकसह पुनर्स्थित करणे आवश्यक आहे.
?
या प्रकरणातील CSS कोड हॉवरवरील ब्लॉक सारखाच आहे, फक्त इतर वर्ग सोयीसाठी वापरले जातात. आणि योग्य ऑपरेशनसाठी, आम्ही फोकस करण्यासाठी स्यूडो-क्लास बदलतो.
/* आम्ही स्पॉट स्वतः डिझाइन करण्यासाठी आफ्टर स्यूडो-क्लास वापरतो, परंतु त्याच वेळी आम्ही ते लपवतो, कारण ते फक्त */ .focus:after (सामग्री: attr(डेटा-शीर्षक); प्रदर्शन: काहीही नाही. ; पूर्णत: 130%; 0px; 5px; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); फॉन्ट-आकार: 12px;) / * मालमत्ता जोडा जेणेकरून जेव्हा तुम्ही एखाद्या घटकावर क्लिक करता तेव्हा एक संकेत बॉक्स दिसेल */ .focus:focus:after(display: block;)
जसे आपण पाहू शकता, व्यावहारिकदृष्ट्या कोणताही फरक नाही.
क्लिक केल्यावर टूलटिप.तुम्हाला टूलटिपला मागील पर्यायापेक्षा थोडे चांगले स्वरूपित करायचे असल्यास ही क्लिक पद्धत देखील अधिक उपयुक्त असेल.
? ही एक डिझाइन टिप आहे
आणि डायची वास्तविक रचना:
/* कंटेनरवर सापेक्ष पोझिशनिंग सेट करा */ .ब्लॉक(स्थिती:सापेक्ष;) /* डीफॉल्ट लपलेले घटक डिझाइन करा */ .लपलेले (प्रदर्शन: काहीही; स्थिती: परिपूर्ण; तळ: 130%; डावीकडे: 0px; पार्श्वभूमी-रंग : # fff; टेक्स्ट-संरेखित: 0 1px rgba (0,0,0,.16); सावली: 0 1px 1px rgba(0,0,0,.16); फॉन्ट-आकार: 12px;) /* लपविलेल्या घटकासाठी अतिरिक्त सजावट (पर्यायी) */ .focus + .hidden:before (सामग्री: " "; स्थिती: 98% डावीकडे: 5px सीमा: 0 : 7px ठोस #fff; बॉर्डर-रंग: #fff पारदर्शक पारदर्शक; z-इंडेक्स: 2;) /* लपलेल्या घटकासाठी अतिरिक्त सजावट (वैकल्पिक) */ .focus + .hidden :after (सामग्री: " "; स्थिती: पूर्ण: 10% डावा: सीमा-रुंदी: 0; सीमा: 7px घन पारदर्शक; सीमा-उजवीकडे: 7px घन #fff; बॉर्डर-रंग: rgba(0,0,0,.16) पारदर्शक पारदर्शक पारदर्शक; z-इंडेक्स: 1;) /* */ .focus:focus + .hidden (डिस्प्ले: ब्लॉक;) क्लिक केल्यावर लपलेल्या घटकाचे स्वरूप
जसे आपण पाहू शकता, यात काहीही क्लिष्ट नाही. याव्यतिरिक्त, तुम्ही होव्हर आणि क्लिकद्वारे स्थितीतील बदल आयोजित करू शकता. जरी, प्रामाणिकपणे, मी क्लिक-टू-क्लिक पद्धत किती संबंधित आहे हे सांगू शकत नाही.
वापरून शेवटच्या उदाहरणाचे अनुकरण देखील आहे, परंतु तुमच्या वेबसाइटवर टूलटिप आयोजित करण्यासाठी त्याचा वापर पूर्णपणे योग्य नाही असे मला वाटते. आपण माझ्याशी जोरदार असहमत असल्यास, टिप्पण्यांमध्ये आपले स्वागत आहे.
व्हिडिओ धडा - स्क्रिप्टशिवाय टूलटिप.माझ्यासाठी एवढेच. सर्वांना शुभेच्छा.
नमस्कार, प्रिय मित्रांनो. दुसऱ्या दिवशी, माझ्या एका ग्राहकाने त्याची वेबसाइट सुधारण्याची विनंती करून माझ्याशी संपर्क साधला. किंवा त्याऐवजी, जुना फॉर्म बदलला असल्याने वेबसाइटवर नवीन अर्ज करा.
प्रत्येक फॉर्म फील्डला एक टूलटिप जोडण्यास सांगितले. तुम्ही कदाचित अशा सूचना पाहिल्या असतील: जेव्हा तुम्ही इमेज किंवा शब्दावर माउस कर्सर हलवता तेव्हा टूलटिप दिसते.
अर्थात, अशा टिप्स अंमलात आणण्यासाठी भरपूर पर्याय आहेत. साहजिकच, सर्व्हरवरील लोड कमी करण्यावर लक्ष केंद्रित करून, मी HTML आणि CSS वापरून टूलटिप बनवण्याचा निर्णय घेतला. हे अगदी सोपे आहे आणि सर्व्हर लोड करत नाही.
आणि अशा इशाराचा प्रकार केवळ आपल्या कौशल्य आणि कल्पनेवर अवलंबून असतो. ग्राहक फॉर्ममध्ये, मी हे इनपुट फील्डच्या पुढे प्रश्नचिन्ह असलेली प्रतिमा म्हणून लागू केले आहे, कर्सर फिरवत आहे ज्यावर टूलटिप दिसते.
टूलटिप अंमलबजावणीचे उदाहरण
टूलटिप कशी तयार करावीतर, संपूर्ण प्रक्रियेसाठी आपल्याला 5 मिनिटांपेक्षा जास्त वेळ लागणार नाही. प्रथम आपण लक्ष वेधून घेणारी वस्तू कशी दिसेल हे ठरविणे आवश्यक आहे. म्हणजेच, ही एक प्रतिमा असू शकते, सीएसएस शैली वापरून तयार केलेली साधी टूलटिप अशी दिसते. आणि प्रतिमेला बांधले. किंवा .
प्रतिमेला टूलटिप संलग्न करण्यासाठी, प्रतिमा प्रथम असणे आवश्यक आहे आणि नंतर आपल्या साइटवर अपलोड करणे आवश्यक आहे. मला असे वाटते की यावर विचार करण्यात काही अर्थ नाही. पुढे, ज्या ठिकाणी तुम्हाला ही प्रतिमा आणि टूलटिप दाखवायची आहे त्या ठिकाणी, हा कोड घाला:
जर हा शब्द किंवा वाक्प्रचार असेल, तर तुम्हाला हा कोड त्या ठिकाणी टाकावा लागेल जिथे तुम्हाला इशारा प्रदर्शित करायचा आहे.
वर्ड टूलटिप मजकूर
आता तुम्हाला तुमच्या CSS स्टाइलशीटमध्ये स्टाइल्स घालण्याची आवश्यकता आहे, बहुतेक प्रकरणांमध्ये ही style.css फाइल आहे.
WP प्रशासकीय पॅनेल उघडा - "स्वरूप" - "संपादक" - "शैली पत्रक" आणि या शैली अगदी शेवटी घाला.
मदत ( रंग: #2C8505; बाह्यरेखा: काहीही नाही; /*मदत रंग*/ कर्सर: मदत; मजकूर-सजावट: काहीही नाही; /*कर्सर फिरत असताना, पॉइंटर*/ स्थिती: संबंधित; /*स्थिती*/ सह बदलले जाऊ शकते ) /*टूलटिप स्थिती*/ .मदत स्पॅन ( समास-डावीकडे: -999em; स्थिती: परिपूर्ण; ) /*होवर टूलटिप*/ .मदत:होव्हर स्पॅन (फॉन्ट-फॅमिली: वर्डाना, ताहोमा, जिनिव्हा, सॅन्स-सेरिफ; / *फॉन्ट*/ स्थिती: पूर्ण; /*स्थिती*/ शीर्ष: 25px; रुंदी: 200px; पार्श्वभूमी: 0 0 rgba (97, 177, 255, 0.9) नाही; / बॉक्स-छाया: 5px 5px rgba(0, 0, 0, 0.2); /*टूलटिप फॉन्ट रंग*/ पॅडिंग: 5px;
तुम्ही बघू शकता, मी तुमच्यासाठी टिप्स बनवल्या आहेत. तुम्हाला फक्त तुमच्या रचनेनुसार बदल करायचे आहेत आणि तुम्ही टूलटिपचा आनंद घेऊ शकता. आणि जर तुमच्या अभ्यागतांना काहीतरी भरायचे असेल, साइटवर नोंदणी करायची असेल किंवा काही कृती करायची असेल तर तुम्हाला फक्त सूचनांची गरज आहे. आणि तुमचे अभ्यागत तुमचे खूप आभारी असतील.
