CSS3 और HTML5 उपकरण

इस तथ्य के कारण कि हब्रहाब पर मुझे इस सरल का वर्णन नहीं मिला और उसी समय सरल "टूलटिप्स" बनाने के लिए सुविधाजनक तरीका - टूलटिप्स, मैंने इसके बारे में लिखने का फैसला किया।
यह विधि JS का उपयोग नहीं करेगी, हम CSS3 और HTML5 के साथ केवल सामग्री हैं।

त्याग

असल में, CSS2 में सामग्री छद्म तत्व की संपत्ति के लिए css attr () और इस तरह से, सामान्य रूप से, कोई नई बात नहीं है।

आसान तरीका है

यह विधि काम करेगी जहां आपको छोटे "टूलटिप्स" की आवश्यकता होती है - टूलटिप्स।

शुरू करने के लिए, मैं कोड दिखाऊंगा:

<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span> 

 .tooltip { border-bottom: 1px dotted #0077AA; cursor: help; } .tooltip::after { background: rgba(0, 0, 0, 0.8); border-radius: 8px 8px 8px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #FFF; content: attr(data-tooltip); /*   ,     */ margin-top: -24px; opacity: 0; /*   ... */ padding: 3px 7px; position: absolute; visibility: hidden; /* ... . */ transition: all 0.4s ease-in-out; /*     */ } .tooltip:hover::after { opacity: 1; /*   */ visibility: visible; } 

हम एक तत्व लेते हैं (हमारे मामले में, अवधि), इसमें पाठ के साथ एक विशेषता जोड़ें, जिसे दिखाया जाएगा, और छद्म तत्व के बाद :: ले। इस छद्म तत्व की सामग्री में, attr () की उल्लेखनीय संपत्ति का उपयोग करते हुए, हम अपने टूलटिप को टेक्स्ट असाइन करते हैं और फिर इसे प्रदर्शित करते हैं: होवर।
मुझे लगता है कि कोड में टिप्पणियों से बाकी गुण स्पष्ट हैं।

अलग से, मैं यह नोट करना चाहता हूं कि एनीमेशन क्रोम और ओपेरा में कैसे व्यवहार करता है (शायद आईई में, इसकी अनुपस्थिति के लिए, मेरे पास जांचने का कोई तरीका नहीं है)।
वह नहीं है। यह इस तथ्य के कारण है कि वेबकिट और ओपेरा, छद्म तत्वों के बाद :: पहले और बाद में संक्रमण और एनीमेशन लागू नहीं करते हैं।
इस कारण से, WebKit बग ट्रैकर में एक बग पंजीकृत किया गया है।

अधिक जटिल टूलटिप्स के लिए विधि

कभी-कभी टूलटिप में केवल पाठ नहीं होना चाहिए, बल्कि कुछ प्रारूपण या छवि भी होनी चाहिए जिन्हें आप पिछली विधि में सम्मिलित नहीं कर सकते हैं।

आगे मैं केवल इस बात पर विचार करूंगा कि इस तरह से क्या किया जा सकता है।

और फिर से कोड:

 <a class="htooltip" href="http://habrahabr.ru/">qutIM <span>qutIM —   .      . <img src="logo.png" /> </span> </a> 

 .htooltip span { /*     */ background-color: rgba(0,0,0, 0.8); border-radius: 15px 15px 15px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #fff; margin-left: 2px; margin-top: -75px; opacity: 0; /*    */ padding: 10px 10px 10px 40px; position: absolute; text-decoration: none; visibility: hidden; /*   */ width: 350px; z-index: 10; } .htooltip:hover span { /*  hover   */ opacity: 1; visibility: visible; } .htooltip span img { /*    */ border: 0 none; float: left; margin: -71px 0 0 -234px; opacity: 0; position: absolute; visibility: hidden; z-index: -1; } .htooltip:hover span img { /*   */ opacity: 1; visibility: visible; } 

सब कुछ सरल है। इस पृष्ठ पर इन उदाहरणों को देखा जा सकता है।

PS कुछ पूछेगा: HTML5 कहां है? लेख में डेटा का उल्लेख है- * विशेषताएँ जो एचटीएमएल 5 विनिर्देश का हिस्सा हैं।