बटन के लिए टूलटिप्स

292

क्या html बटन के लिए टूलटिप बनाना संभव है। इसका सामान्य HTML बटन है और कोई शीर्षक विशेषता नहीं है क्योंकि यह कुछ HTML नियंत्रणों के लिए है। कोई विचार या टिप्पणी?

html button tooltip

— Saravan
स्रोत

559

बस titleअपने में एक जोड़ें button।

<button title="Hello World!">Sample Button</button>

स्निपेट का विस्तार करें

— Muad'Dib
स्रोत

9

@EduardLuca, मेरे मामले में टूलटिप वास्तव में disabledबटनों पर काम नहीं करता है क्योंकि बूटस्ट्रैप pointer-events: noneअक्षम अवस्था के लिए सेट है । यदि pointer-events: autoतत्व को सीधे सेट किया जाए तो यह काम करना चाहिए ।

— विटाली एल्पस्क

यह भी है कि, टूलटिप का लक्ष्य नीचे से यह दिखाना होगा कि माउस कहाँ है। इसलिए अगर टारगेट एलिमेंट स्क्रीन के नीचे दाईं ओर है तो टूलटिप माउस पॉइंटर पर स्क्रैम्बल करता है। आम तौर पर: टिप की स्थिति कभी-कभी स्मार्ट नहीं होती है ... लेकिन मुझे लगता है कि यह अभी ब्राउज़र है।

— गिदोन

1

ऐसी परिस्थितियां हैं जहां टूलटिप्स आवश्यक हैं , लेकिन इस उत्तर में विधि का उपयोग करते समय आपके उपयोगकर्ताबेस पर विचार करना महत्वपूर्ण है । मैंने titleएक बटन के लिए कीबोर्ड शॉर्टकट दिखाने के लिए विशेषता का उपयोग किया है क्योंकि शॉर्टकट आवश्यक नहीं हैं और केवल उन डिवाइस को स्पर्श करते हैं जो कीबोर्ड का उपयोग नहीं करते हैं।

— डेव एफ

लेकिन यह टूलटिप नहीं दिखाता है जब आप बटन को फोकस करने के लिए कीबोर्ड का उपयोग करते हैं, तो इसे संभालने के लिए कोई अन्य ट्रिक? मुझे लगता है कि यह पहुंच का मुद्दा है, नहीं?

— निखिल

संदर्भ: HTML लिविंग स्टैंडर्ड 3.2.6.1 शीर्षक विशेषता ।

— लुडोविक क्रूट

43

दोनों <button>टैग और <input type="button">एक शीर्षक विशेषता स्वीकार करते हैं ..

— गेब्रियल पेट्रीओली
स्रोत

के बारे में क्या उपयोग करते हुए सादे HTML लिंक के लिए <a>और href?

— एरोन फ्रेंके

1

@AaronFranke हाँ aटैग के साथ-साथ सभी टैग titleविशेषता का समर्थन करते हैं। देखें developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

— गैब्रिएल Petrioli

12

titleविशेषता का उपयोग करें । यह एक मानक HTML विशेषता है और डिफ़ॉल्ट रूप से अधिकांश डेस्कटॉप ब्राउज़रों द्वारा टूलटिप में प्रदान की जाती है।

— skyman
स्रोत

समस्या जो मैं पढ़ रहा हूं, हालांकि यह हाइलाइट करता है कि शीर्षक विशेषता पूरी तरह से कई मोबाइल ब्राउज़रों द्वारा समर्थित नहीं है। मैं वर्तमान में कुछ एडीए मुद्दों के लिए इस पर शोध कर रहा हूं और यह केवल कुछ हद तक समर्थित प्रतीत होता है।

— isaac weathers

3

@isaacweathers खैर, शीर्षक देखने के लिए आप मोबाइल ब्राउज़र में "हॉवर" कैसे करेंगे?

— mbomb007

@ mbomb007 -: वॉयसओवर के साथ iOS पर ध्यान केंद्रित करने की स्थिति करीब है: होवर विशेषता जो आपको मिल सकती है।

— इस्साक बुनकर

लिंक शानदार हैं, लेकिन वे कभी भी आपके उत्तर में जानकारी का एकमात्र टुकड़ा नहीं होना चाहिए। जब कोई स्टैक एक्सचेंज में जाता है, तो प्रश्न "उत्तर" में वास्तव में एक उत्तर होना चाहिए। उत्तर की ओर दिशाओं का एक गुच्छा नहीं।

— एरिक फिलिप्स

10

यहाँ हर कोई एक पागल समाधान की तलाश में , बस कोशिश करें

title="your-tooltip-here"

में किसी भी टैग । मैं td's और a' s में परीक्षण किया है और यह बहुत काम करता है।

— डेविडसन लीमा
स्रोत

2

@krillgar, मैंने एक सामान्य समाधान दिया जो न केवल बटन बल्कि अन्य टैग के साथ काम करता है । मेरा इरादा इस संभावना को मजबूत कर रहा था।

— डेविडसन लीमा

3

आपकी पिछली टिप्पणी के बारे में, यह पहले से ही है कि स्काईमैन का जवाब वर्षों पहले क्या कह रहा था।

— Pac0

2

एक बटन एक "शीर्षक" विशेषता को स्वीकार करता है। जब आप बटन पर माउस को घुमाते हैं, तो आप उसे वह मान असाइन कर सकते हैं, जिसे आप लेबल दिखाना चाहते हैं।

<button type="submit" title="Login">
Login</button>

स्निपेट का विस्तार करें

— फेलिक्स उरुटिया
स्रोत

1

शीर्षक विशेषता अधिक जानकारी देने के लिए है। यह एसईओ के लिए उपयोगी नहीं है, इसलिए शीर्षक में एक ही पाठ का होना कभी भी एक अच्छा विचार नहीं है और अल्ट जो कि छवि या इनपुट का वर्णन करने के लिए होता है बनाम यह क्या करता है। उदाहरण के लिए:

<button title="prints out hello world">Sample Buttons</button>

<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />

शीर्षक विशेषता एक टूल टिप बनाएगी, लेकिन इसे ब्राउज़र द्वारा नियंत्रित किया जाएगा जहां तक वह दिखाता है और यह कैसा दिखता है। यदि आप अधिक नियंत्रण चाहते हैं तो तीसरे पक्ष के jQuery विकल्प हैं, कई css टेम्पलेट जैसे बूटस्ट्रैप ने समाधानों में बनाया है, और यदि आप चाहें तो आप एक साधारण सीएसएस समाधान भी लिख सकते हैं। इस w3schools समाधान की जाँच करें ।

— एयू क्रॉफर्ड
स्रोत

-1

सभी ब्राउज़रों में काम करने के लिए आपको शीर्षक और ऑल्ट विशेषता दोनों का उपयोग करना चाहिए ।

<button title="Hello World!" alt="Hello World!">Sample Button</button>

— सर्गेई गुरिन
स्रोत

1

आपको दोनों का उपयोग क्यों करना चाहिए?

— आंद्रेई किओरा

क्योंकि कुछ ब्राउज़र Alt विशेषता और कुछ शीर्षक का उपयोग करते हैं

— सर्गेई गुरिन

5

बकवास। altविशेषता ही मान्य के लिए है img, input type="image"और areaटैग।

— बिटबिटडेकर