css - Cant get css3 tooltip transition working -

  .tooltip {स्थिति: रिश्तेदार} .tooltip: hover: after {background: #fff! महत्वपूर्ण; सीमा-त्रिज्या: 30px / 120px; नीचे: -8 पिक्सेल; बॉक्स-छाया: 0 2px 4px # 646464; रंग: # 9B9B9B; सामग्री: अट्र (शीर्षक); बाएं: 110%; पैडिंग: 20px 30px; Z- इंडेक्स: 98; चौड़ाई: 240 पिक्सेल; स्थिति: पूर्ण; अस्पष्टता: 0.4; फ़ॉन्ट: 20px "आधुनिक रीगुलर"! महत्वपूर्ण; संक्रमण: सभी 1s; } .tooltip: hover: after: hover {background: #fff! महत्वपूर्ण; सीमा-त्रिज्या: 30px / 120px; नीचे: -8 पिक्सेल; बॉक्स-छाया: 0 2px 4px # 646464; रंग: # 9B9B9B; सामग्री: अट्र (शीर्षक); बाएं: 110%; पैडिंग: 20px 30px; Z- इंडेक्स: 98; चौड़ाई: 240 पिक्सेल; स्थिति: पूर्ण; अस्पष्टता: 1; फ़ॉन्ट: 20px "आधुनिक रीगुलर"! महत्वपूर्ण; }   
 मैंने इसे काम करने की कोशिश की लेकिन कोई भाग्य अभी तक नहीं है। मैं क्या गलत कर रहा हूं?  
 
 
 आप में यह कैसे काम कर सकता है?  
 एचटीएमएल में आपके पास एक त्रुटि है: आप  a  तत्व को बंद नहीं करते हैं।  
 मैंने इसे बनाया है:  
 यही वह है जिसे आप चाहते हैं?  < P>  संपादित करें:  मुझे लगता है कि आप यही चाहते हैं:  
 चीयर्स, लियो