जावास्क्रिप्ट के बिना होवर टेक्स्ट जोड़ें जैसे हम उपयोगकर्ता की प्रतिष्ठा पर मंडराते हैं

Question

स्टैकओवरफ़्लो में, जब हम उपयोगकर्ता की प्रतिष्ठा पर मंडराते हैं तो हमें एक टेक्स्ट दिखाई देता है। मैंने इसे कई स्थानों पर देखा है और स्रोत कोड मुझे बताता है कि यह बिना js के किया जा सकता है। और मैंने कोशिश की और केवल यही मिला-

 <div="text">hover me</div>

Answer 1

titleउदाहरण के लिए, विशेषता का उपयोग करें :

<div title="them's hoverin' words">hover me</div>

या:

<span title="them's hoverin' words">hover me</span>

Comments

क्या यह वैसा ही है जब हम किसी उपयोगकर्ता की प्रतिष्ठा पर मंडराते हैं

— Ash

हां, यदि आप प्रतिष्ठा के लिए स्रोत कोड को देखते हैं, तो आप देखेंगे कि शीर्षक विशेषता निर्धारित है reputation score।

— गोचार्ड

@ केविन यह समाधान वास्तव में जावास्क्रिप्ट समाधान से बेहतर है क्योंकि यह जावास्क्रिप्ट अक्षम के साथ ब्राउज़रों पर काम करेगा, और यह तत्व की सामग्री के बारे में स्क्रीन पाठकों के लिए एक संकेत भी जोड़ता है।

— gocochard

@KevinMeredith मैं कहूंगा कि जेएस समाधान बेहतर होगा एकमात्र उपाय यह है कि आप उस पाठ को स्टाइल नहीं कर सकते हैं जो प्रकट होता है और केवल मूल कार्यान्वयन के साथ छोड़ दिया जाता है।

— शून्य 298

@ डेविड डी सी ई फ्रीटास: इस उत्तर को संपादित करने के साथ स्टैकऑवरफ्लो को रोशन करने के लिए आपका धन्यवाद ... पता नहीं कैसे वास्तव में आपको टैग करें लेकिन ओह अच्छा

— मेरेडिथ

Answer 2

शीर्षक विशेषता अन्य HTML तत्वों के साथ भी अच्छी तरह से काम करती है, उदाहरण के लिए एक लिंक ...

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>

Answer 3

अक्सर मैं इस स्थिति में संक्षिप्त नाम HTML टैग के लिए पहुंचता हूं।

<abbr title="Hover">Text</abbr>

https://www.w3schools.com/tags/tag_abbr.asp

Comments

वह तत्व विशेष रूप से संक्षिप्तीकरण इंगित करने के लिए उपयोग किया जाता है, इसलिए यह एक अच्छा विचार नहीं है। आप इसे संक्षिप्त नाम के रूप में उच्चारण करने के लिए टेक्स्ट-टू-स्पीच सिस्टम बता रहे हैं। <span>यदि आप केवल एक हॉवर पाठ चाहते हैं, तो उपयोग करें ।

— लार्स मारियस गर्सहोल

Answer 4

आप टूलटिप की तलाश कर रहे हैं

मूल टूलटिप के लिए, आप चाहते हैं:

<div title="This is my tooltip">

एक कट्टर जावास्क्रिप्ट संस्करण के लिए, आप इसमें देख सकते हैं:

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

उपरोक्त लिंक आपको टूलटिप्स के लिए 12 विकल्प देता है।