मैं HTML टूलटिप में गाड़ी वापसी का उपयोग कैसे कर सकता हूं?

Question

मैं वर्तमान में हमारी साइट पर वर्बोज़ टूलटिप्स जोड़ रहा हूं, और मैं चाहूंगा कि (व्हिज़-बैंग jQuery प्लगइन का सहारा लिए बिना, मुझे पता है कि कई हैं!) टूलटिप को प्रारूपित करने के लिए कैरिज रिटर्न का उपयोग करने के लिए।

टिप जोड़ने के लिए मैं titleविशेषता का उपयोग कर रहा हूं । मैंने सामान्य साइटों के आस-पास देखा और मूल टेम्पलेट का उपयोग किया:

<a title='Tool?Tip?On?New?Line'>link with tip</a>

मैंने इसके ?साथ बदलने की कोशिश की है :

• <br />
• &013; / 

• \r\n
• Environment.NewLine (मैं C # का उपयोग कर रहा हूं)

उपरोक्त कार्यों में से कोई भी नहीं। क्या यह संभव है?

Comments

यह काफी मुश्किल है, लेकिन वर्कअराउंड हो सकता है। अपने शीर्षक के सभी रिक्त स्थान को नॉन-ब्रेकिंग स्पेस में बदलें  । फिर उन स्थानों को रखें जहां आप चाहते हैं कि लाइन टूट जाए। आपको  अपने स्थान (लाइन ब्रेक) से पहले पात्रों का एक गुच्छा जोड़ना पड़ सकता है ।

— जुमेक्सोज़ी

Answer 1

यह इतना आसान है कि आप अपने आप को लात मार देंगे ... बस प्रेस दर्ज करें!

<a title='Tool
Tip
On
New
Line'>link with tip</a>

फ़ायरफ़ॉक्स बहु-लाइन टूलटिप्स को बिल्कुल भी प्रदर्शित नहीं करेगा - यह कुछ भी नहीं के साथ नए की जगह लेगा।

Comments

यह उत्तर पुराना है, फ़ायरफ़ॉक्स अब शीर्षक में नई सूची प्रदर्शित करता है (मैं v25 का उपयोग कर रहा हूँ)। इसके साथ काम करता है \n, \u000Aऔर \x0A।

— हेल्सिओन

@ हेलसीयन, अन्य पाठकों के लिए स्पष्ट करने के लिए, उपरोक्त तीन कोड HTML नहीं लगते हैं। वे सी-व्युत्पन्न भाषा स्ट्रिंग एस्केप सीक्वेंस की तरह दिखते हैं।

— सैम

@ मेम मुझे समझ नहीं आ रहा है कि आपका क्या मतलब है। \x0A(बाइट) चरित्र-कोड है जो एक नई रेखा के साथ मेल खाता है। उसी के लिए \u000A(यूनिकोड)। \nभी नई है।

— हेलसिऑन

@ हेलसीओन, मैंने titleफ़ायरफ़ॉक्स और क्रोम में एक विशेषता में उन एस्केप दृश्यों को डालने की कोशिश की , और उन्हें टूलपिप में केवल शाब्दिक रूप से प्रस्तुत किया गया। बाद में, मुझे एहसास हुआ कि आप शायद उस वाक्यविन्यास का उपयोग संचार के एक तरीके के रूप में कर रहे हैं कि कौन से अक्षर (बच के क्रम नहीं) का उपयोग किया जाना चाहिए। मेरी टिप्पणी अन्य लोगों के समय को बचाने के लिए उन्हें चेतावनी देकर है कि वे अपने एचटीएमएल में आपके भागने के क्रम को डालने की कोशिश न करें ताकि वे समय बर्बाद न करें जैसे मैंने किया।

— सैम

@Tarquin वे HTML में काम नहीं करते हैं, वे केवल विशेष रूप से PHP के दोहरे उद्धरण चिह्नों में काम करते हैं क्योंकि यह PHP के दोहरे उद्धरण चिह्नों की एक विशेषता है।

— ब्रिलियनड

Answer 2

नवीनतम विनिर्देश लाइन फ़ीड चरित्र की अनुमति देता है, तो विशेषता या संस्था के अंदर एक सरल लाइन ब्रेक 
(ध्यान दें कि पात्रों #और ;आवश्यक हैं) ठीक हैं।

Comments

यह क्रोम द्वारा समर्थित नहीं है लेकिन फ़ायरफ़ॉक्स के लिए ठीक है!

— अलादीन

मैंने कोशिश की 
और दोनों 
। 
क्रोम संस्करण 50.0.2661.94 (64-बिट) में "लाइन ब्रेक" का इरादा नहीं था। 
क्रोम, फ़ायरफ़ॉक्स और ओपेरा (सभी 64-बिट उबंटू के लिए) और इंटरनेट एक्सप्लोरर संस्करण 11.0 और विंडोज़ पर कुछ बदलाव के वर्तमान संस्करणों में अच्छी तरह से काम कर रहा है।

— Tass

यह मेरे लिए विशेष रूप से उपयोगी है क्योंकि मैं वर्डप्रेस पोस्ट संपादक पर ऐसा करने की कोशिश कर रहा था।

— ed1nh0

& # 10; IE, फ़ायरफ़ॉक्स और क्रोम में खूबसूरती से काम करता है। धन्यवाद!

— डैनियल

क्रोम के लिए & # 013; ....... उदाहरण: शीर्षक = "title1 & # 13; title2 & # 13; शीर्षक 3"

— मलिक जाहिद

Answer 3

वर्ण 10 की कोशिश करें। यह फ़ायरफ़ॉक्स में काम नहीं करेगा। :(

पाठ एक ब्राउज़र पर निर्भर तरीके से प्रदर्शित किया जाता है (यदि सभी पर)। छोटे टूलटिप अधिकांश ब्राउज़रों पर काम करते हैं। IE और सफारी में लंबे टूलटिप्स और लाइन ब्रेकिंग का काम (उपयोग 
या 
एक नई नईलाइन के लिए)। फ़ायरफ़ॉक्स और ओपेरा न्यूलाइन्स का समर्थन नहीं करते हैं। फ़ायरफ़ॉक्स लंबे टूलटिप्स का समर्थन नहीं करता है।

http://modp.com/wiki/htmltitletooltips

अपडेट करें:

जनवरी 2015 तक फ़ायरफ़ॉक्स 
एक HTML titleविशेषता में लाइन ब्रेक डालने के लिए समर्थन करता है । नीचे स्निपेट उदाहरण देखें।

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

Comments

+1। यदि आप एक jQuery प्लगइन का उपयोग करने का निर्णय लेते हैं, तो इष्टतम पहुंच के लिए इसे शीर्षक विशेषता से अपनी सामग्री को पढ़ना चाहिए और रनटाइम पर लाइन-ब्रेक के लिए कुछ मनमाने ढंग से अदृश्य चरित्र को स्थानापन्न करना चाहिए।

— केंट फ्रेड्रिक

+1। दिलचस्प सामान। अभी भी कुछ यूएएस का मुद्दा शीर्षक को ट्रिम कर रहा है जब यह पॉप अप होता है - एफएफ 2 जैसा कि मुझे याद है लेकिन इन दिनों यह एक मुद्दे से कम है।

— रूबरूकेर

जनवरी 2015 तक फ़ायरफ़ॉक्स लाइन ब्रेक डालने के लिए 
एक titleविशेषता का उपयोग करके समर्थन करता है ।

— छद्मसंवत

मैं एक SVG तत्व में IE11 में काम करने के लिए लाइन ब्रेक नहीं पा सका <title>। क्या किसी को इसके साथ अधिक सफलता मिली है? ऊपर दिए गए / नीचे उल्लेख चार कोड की कोशिश की, कोई भी काम करने लगते हैं।

— रीमेक

Answer 4

आईई, क्रोम, सफारी, फ़ायरफ़ॉक्स में इसका परीक्षण किया गया (नवीनतम संस्करण 2012-11-27):



उन सभी में काम करता है ...

Comments

पहला तरीका (कोड में लाइनें तोड़ना) सरल लगता है, लेकिन ऑटो-फॉर्मेटर्स जेएस-कोड कार्यक्रमों के लिए खड़ा नहीं होता है।

— होरियाटु जूल

@Camilo मार्टिन, नईलाइन और लाइनफ़ीड प्लेटफ़ॉर्म पर समान हैं। 
यूनिक्स लाइनफीड वैसे ही है जैसे यह विंडो लाइनफीड है। इसी तरह, 
दोनों प्लेटफार्मों के लिए नई लाइन है। कल्पना निर्दिष्ट linefeed (वामो) चार निश्चित रूप से है जो 
दोनों (सभी?) प्लेटफॉर्म पर।

— परिपक्व

@ मैटी निश्चित नहीं है अगर मैं आपको समझता हूं - उपयोग करने के लिए सही चीज यूनिक्स लगती है LF(जो कि प्रोटोकॉल और टूल के पार थोड़े मानक लाइनफीड है), CRकेवल पुराने मैक (और अन्य अस्पष्ट प्लेटफार्मों) द्वारा उपयोग किया गया था और जगह से बाहर लगता है।

— कैमिलो मार्टिन

मैं अपनी भ्रामक शब्द पसंद के लिए माफी माँगता हूँ। जिसे मैंने लाइनफीड (# 10) कहा है वह वास्तव में एक नई रेखा है, हालांकि अक्सर इसे एलएफ कहा जाता है। क्या मैं एक newline (# 13) कहा जाता है वास्तव में एक गाड़ी वापसी है। किसी भी मामले में, मेरी बात यह थी कि सभी प्लेटफ़ॉर्म पर वे मूल्य समान हैं। यह तथ्य कि विंडोज़ (इन दोनों वर्णों का उपयोग एक पंक्ति को समाप्त करने के लिए) और मैक (एक पंक्ति को समाप्त करने के लिए "गलत" वर्ण का उपयोग करके) अप्रासंगिक होना चाहिए, जिसके संबंध में HTML इकाई को शीर्षक विशेषता में उपयोग किया जाना है। युक्ति कहती है 
, हालांकि स्पष्ट 
रूप से कई परिस्थितियों में भी काम करता है।

— परिपक्व

सादा & # 13; लिनक्स पर क्रोम के लिए काम नहीं करता है। अनुक्रम & # 13; & # 10; हालाँकि, करता है।

— सैम वाटकिंस

Answer 5

यह भी उल्लेख के लायक है, अगर आप इस तरह से जावास्क्रिप्ट के साथ शीर्षक विशेषता सेट कर रहे हैं:

divElement.setAttribute("title", "Line one
Line two");

यह काम नहीं करेगा। आपको उस ASCII दशमलव 10 को ASCII हेक्साडेसिमल A से उस तरीके से बदलना होगा जिस तरह से यह जावास्क्रिप्ट के साथ बच गया है। ऐशे ही:

divElement.setAttribute("title", "Line one\x0ALine two");

Comments

@MaxNanasy सहमत हैं, और वे समतुल्य हैं ( \nमतलब चार कोड 10 वैसे भी)

— rvighne

Answer 6

फ़ायरफ़ॉक्स 12 के रूप में वे अब लाइन फीड HTML इकाई का उपयोग करके लाइन ब्रेक का समर्थन करते हैं: 


<span title="First line&#10;Second line">Test</span>

यह IE में काम करता है और शीर्षक विशेषता के लिए HTML5 कल्पना के अनुसार सही है ।

Answer 7

यदि आप jQuery का उपयोग कर रहे हैं:

$(td).attr("title", "One \n Two \n Three");

काम करेगा।

IE-9 में परीक्षण किया गया: काम कर रहा है।

Comments

MVC 3 में काम किया गया उदाहरण: @ Html.DropDownList ("RegId", null, "Select Region", new {title = "ड्रॉप-डाउन मेनू से एक क्षेत्र का चयन करें, वैध अनुबंध नामों की सूची प्राप्त करने के लिए \ nwhich आवश्यक है" , @class = "फॉर्म-कंट्रोल", onchange = "getContractNames (यह)", स्टाइल = "चौड़ाई: 200px;"})

— वॉरेन लॉफ्रेंस

Answer 8


समाधान में योगदान के रूप में , हम &#009टैब के लिए भी उपयोग कर सकते हैं यदि आपको कभी ऐसा कुछ करने की आवश्यकता हो।

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

डेमो

Answer 9


 सभी बड़ी ब्राउज़र (IE शामिल) पर काम करेंगे

Comments

यह उत्तर पुराना है; & # 13; क्रोम और अन्य ब्राउज़रों में भी काम करता है।

— SaeX

Answer 10

मुझे पता है कि मुझे पार्टी में देर हो रही है, लेकिन उन लोगों के लिए जो इस काम को देखना चाहते हैं, यहाँ एक डेमो है: http://jsfiddle.net/rzea/vsp6840b/3/

HTML का उपयोग किया गया:

<a href="#" title="First Line&#013;Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Unordered list tooltip</a>

Comments

सबसे अद्यतित प्रतिक्रिया, और फ़ायरफ़ॉक्स पर बहुत अच्छा काम करता है। धन्यवाद।

— मारवान مروان

Answer 11

मुझे विश्वास नहीं होता कि यह है। फ़ायरफ़ॉक्स 2 वैसे भी लंबे लिंक शीर्षक को ट्रिम करता है और उन्हें वास्तव में केवल मदद पाठ की एक छोटी मात्रा को व्यक्त करने के लिए उपयोग किया जाना चाहिए। यदि आपको अधिक स्पष्टीकरण पाठ की आवश्यकता है, तो मैं सुझाव दूंगा कि यह लिंक से जुड़े पैराग्राफ में है। फिर आप उन पैराग्राफ को छिपाने के लिए टूलटिप जावास्क्रिप्ट कोड जोड़ सकते हैं और उन्हें होवर पर टूलटिप्स के रूप में दिखा सकते हैं। यह क्रॉस-ब्राउज़र IMO काम करने के लिए आपका सबसे अच्छा दांव है।

Answer 12


 <----- यह कैरी रिटर्न डालने के लिए आवश्यक पाठ है।

Comments

सभी ब्राउज़रों में काम करता है :)

— MonoThreaded

Answer 13

Chrome 16, और संभवतः पहले के संस्करणों पर, आप "\ n" का उपयोग कर सकते हैं। एक सिडेनोट के रूप में, "\ t" भी काम करता है

Answer 14

हमारे पास एक आवश्यकता थी जहां हमें इन सभी का परीक्षण करने की आवश्यकता थी, यहां वह है जो मैं साझा करना चाहता हूं

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")

<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
  new 
  line</pre> Works in all browsers</p>
<hr/>

<p title="Tool&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#xD;</code> May work in some browsers</p>
<hr/>

<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>


<p title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>
<hr/>


<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>

<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>

<p title='Tool&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

बेला

Answer 15

Chrome 79 पर, 
 अब काम नहीं करता है।

मैं इसके साथ सफल रहा:




यह सभी प्रमुख ब्राउज़रों में काम करता है।

Answer 16

किसके लिए 
 तरह से काम करना है, आपको उस तत्व को स्टाइल करना होगा जिस पर लाइनें दिखाई देती हैं:white-space: pre-line;

इस उत्तर से संदर्भित: https://stackoverflow.com/a/17172412/1460591

Comments

इस शैली को किस पर लागू करने की आवश्यकता है? शीर्षक? पसंद है a[title]?

— मोहम्मद ज़मीर

Answer 17

बस इस का उपयोग करें:

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

आप इसका उपयोग करके शीर्षक पर नई रेखा जोड़ सकते हैं &#x0a।

Answer 18

बस जावास्क्रिप्ट का उपयोग करें। फिर अधिकांश और पुराने ब्राउज़रों के साथ संगत। न्यूलाइन के लिए एस्केप अनुक्रम \ n का उपयोग करें।

   document.getElementById("ElementID").title = 'First Line text \n Second line text'

Comments

क्रोम का क्या संस्करण? यह मेरे लिए काम करता है और मैं क्रोम का उपयोग कर रहा हूं।

— वेल्शबॉय

वास्तव में मैं क्रोम के अंतिम संस्करण का उपयोग कर रहा हूं, हालांकि, जब से मैं एसवीजी एलिमेंट्स पर काम कर रहा था, यह काम नहीं करता था, यह ठीक नहीं है।

— न्यूहॉपर

Answer 19

यह 
काम करना चाहिए अगर आप सिर्फ एक साधारण शीर्षक विशेषता का उपयोग करते हैं।

बूटस्ट्रैप पॉपओवर पर, विशेषता data-html="true" में html का उपयोग और उपयोग करें data-content।

<div title="Hello &#013;World">hover here</div>

Answer 20

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

Comments

ब्राउज़र अनुकूलित टूलटिप्स को पार करने के लिए एक बहुत ही आसान समाधान के लिए kollermedia.at/archive/2008/03/24/easy-css-tooltip/…

— डेव

@DaveThis एक अच्छा लिंक है, हालांकि डेमो में लाइन ब्रेक चौड़ाई विशेषता के कारण होता है

— Melsi

Answer 21

इस लेख के अनुसार w3c वेबसाइट पर :

CDATA दस्तावेज़ वर्ण सेट से वर्णों का एक क्रम है और इसमें वर्ण निकाय शामिल हो सकते हैं। उपयोगकर्ता एजेंटों को विशेषता मानों की व्याख्या इस प्रकार करनी चाहिए:

• वर्ण संस्थाओं को वर्णों से बदलें,
• लाइन फ़ीड को अनदेखा करें,
• प्रत्येक गाड़ी वापसी या टैब को एक ही स्थान से बदलें।

इसका मतलब है कि (कम से कम) CR और LF शीर्षक विशेषता के अंदर काम नहीं करेंगे। मेरा सुझाव है कि आप एक टूलटिप प्लगइन का उपयोग करें। इनमें से अधिकांश प्लगइन्स मनमाने ढंग से HTML को एक तत्व टूलटिप के रूप में प्रदर्शित करने की अनुमति देते हैं।

Comments

हाँ, मुझे पता है कि यह आधिकारिक नहीं है। आप गलत हैं, जो भी हो। इसका मतलब यह नहीं है कि उन्हें प्रदर्शित नहीं किया जाएगा। इसका मतलब है कि W3C कल्पना यह नहीं बताती है कि उन्हें कैसे प्रदर्शित किया जाना चाहिए ...। पद के बिंदु का सुझाव यह नहीं था कि उनका उपयोग अधिक कार्यात्मक प्लगइन्स को बदलने के लिए किया जा सकता है .... यह गिरावट के दौरान एक मामले का अधिक था जिसका उपयोग किसी अन्य स्थान पर किया जा सकता है।

— पेन्डी

@ip: मैं इसमें गलत हूं कि अद्यतन w3c सिफारिशों का सुझाव है कि ब्राउज़र LF वर्ण के आसपास की सामग्री को विभाजित करते हैं। हालाँकि ब्राउज़र इस व्यवहार को अंततः लागू करेंगे।

— सलमान ए

Answer 22

बहुत अच्छे दिखने वाले टूलटिप्स मैन्युअल रूप से बनाए जा सकते हैं, और HTML स्वरूपण शामिल कर सकते हैं।

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more&#13;&#10;and then some">over</a> the text below:</p>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>

<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>

</body>
</html>

यह इस पर w3schools पोस्ट से लिया गया है । यहाँ उपरोक्त कोड के साथ प्रयोग करें ।

Answer 23

रेज़र सिंटेक्स

ASP.NET MVC के मामले में आप शीर्षक को उपयोग के रूप में एक चर के रूप में संग्रहीत कर सकते हैं \r\nऔर यह काम करेगा।

@{ 
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>

Answer 24

हैक लेकिन काम करता है - (क्रोम और मोबाइल पर परीक्षण)

बस तब तक कोई ब्रेक स्पेस न जोड़ें जब तक यह टूट न जाए - आपको टूलटिप के आकार को सामग्री की मात्रा के आधार पर सीमित करना पड़ सकता है, लेकिन इस पाठ के लिए छोटे पाठ के लिए:

   etc

ऊपर सब कुछ करने की कोशिश की और यह केवल एक चीज है जो मेरे लिए काम करती है -

Answer 25

मैंने नई पंक्ति में शीर्षक पाठ प्रदर्शित करने के लिए "" कोशिश की है और यह एक आकर्षण की तरह काम करता है

Answer 26

मैं फ़ायरफ़ॉक्स 68.7.0esr पर हूँ और 
काम नहीं करता है। लाइनों को तोड़कर <CR>काम किया इसलिए मैं इसके साथ जा रहा हूं क्योंकि यह सरल और आगे है। अर्थात

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk

Answer 27

उपयोग करें data-html="true"और लागू करें <br>।

Comments

यह कल्पना का हिस्सा नहीं है। कुछ यादृच्छिक टूलटिप प्लगइन होना चाहिए

— TJ