ट्विटर बूटस्ट्रैप टूलटिप्स की कई पंक्तियाँ कैसे बनाएं?

Question

मैं वर्तमान में पाठ बनाने के लिए नीचे दिए गए फ़ंक्शन का उपयोग कर रहा हूं जो बूटस्ट्रैप के टूलटिप प्लगइन का उपयोग करके प्रदर्शित किया जाएगा। मल्टीलाइन टूलटिप्स केवल कैसे काम करते हैं <br>और कैसे नहीं आते हैं \n? मैं पसंद करता हूं कि मेरे लिंक की शीर्षक विशेषताओं में कोई HTML नहीं है।

क्या काम करता है

def tooltip(object)
  tooltip = ""
  object.each do |user|
    tooltip += "#{user.identifier}" + "<br>"
  end
  return tooltip
end

मैं क्या चाहता हूँ

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end

Comments

क्या आप HTML में \ n और <br/> के अंतर को समझते हैं?

— कोल जॉनसन

<br/> html रेंडरिंग पक्ष पर काम करेगा, जबकि / n केवल आपके HTML कोड को नई लाइन में प्रदर्शित करेगा

— rajesh kakawat

मैं कुछ अन्य वेबसाइटों को देख रहा था और उनके पास बिना ब्रा के मल्टीलाइन टूलटिप्स हैं

— मैथ्यू हुई

Answer 1

आप white-space:pre-wrapटूलटिप पर उपयोग कर सकते हैं । इससे टूलटिप नई लाइनों का सम्मान करेगा। यदि वे कंटेनर की डिफ़ॉल्ट अधिकतम-चौड़ाई से अधिक हैं, तो लाइनें अभी भी लपेटेंगी।

.tooltip-inner {
    white-space:pre-wrap;
}

http://jsfiddle.net/chad/TSZSL/52/

यदि आप पाठ को लपेटने से रोकना चाहते हैं, तो इसके बजाय निम्नलिखित करें।

.tooltip-inner {
    white-space:pre;
    max-width:none;
}

http://jsfiddle.net/chad/TSZSL/53/

इनमे से कोई \nभी html में काम नहीं करेगा , उन्हें वास्तव में वास्तविक newlines होना चाहिए। वैकल्पिक रूप से, आप एन्कोडेड न्यूलाइन्स का उपयोग कर सकते हैं 
, लेकिन यह संभवतः उपयोग करने <br>की तुलना में कम वांछनीय है ।

Comments

अब आप ऐसा कैसे करते हैं।

— aaa90210

@ aaa90210 आप कोशिश कर सकते हैं .popover-content { white-space:pre-wrap; }। आपकी सामग्री, .popover-content p { white-space:pre-wrap; }या कुछ इसी तरह के आधार पर , बेहतर लग सकता है।

— चाड वॉन नौ

क्या इस तरह से टूलटिप में जेएसपी वैरिएबल दिखाना संभव है? मैंने कोशिश की है <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>। लेकिन यह यह देता है: आआब्ब्ब्कसीक (संक्षिप्त स्ट्रिंग्स)।

— जाइगिमेंटस

.tooltip-inner {व्हाइट-स्पेस: प्री-लाइन;} मेरे लिए काम कर रहा है।

— किशोर के

प्री-लाइन ने मेरे लिए काम किया - अन्य सभी ने टेक्स्ट को ठीक से संरेखित नहीं किया

— एडम मोइसा

Answer 2

आप html प्रॉपर्टी का उपयोग कर सकते हैं: http://jsfiddle.net/UBr6c/

My <a href="#" title="This is a<br />test...<br />or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})

Comments

आपने Bootstrap 2.0.2 (js only)अपने jsFiddle में विकल्प की जाँच नहीं की है , जो इसे प्रारंभिक रन (ओपन) में काम नहीं कर रहा है। चिह्नित करें और इसे सहेजें, इसलिए अन्य अनुपालन नहीं करेंगे, कि आपका उदाहरण काम नहीं करता है।

— ट्रेडर

Answer 3

यदि आप गैर-लिंक तत्व पर ट्विटर बूटस्ट्रैप टूलटिप का उपयोग कर रहे हैं , तो आप निर्दिष्ट कर सकते हैं, कि आप जावास्क्रिप्ट के बिना, HTML कोड में सीधे एक मल्टी-लाइन टूलटिप चाहते हैं, बस dataपैरामीटर का उपयोग करके :

<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>

यह लागतों के उत्तर का एक वैकल्पिक संस्करण है । सारी महिमा उसके पास जाती है! :]

Comments

आप "गैर-लिंक तत्व" क्यों कहते हैं? मैंने एक लिंक पर यह कोशिश की और यह ठीक काम करने लगा।

— ec2011

खैर ... मुझे याद नहीं है! :] पाँच महीने के बाद, मुझे लगता है कि मैं गलत था। मुझे यह भी पता नहीं है कि लिंक पर काम क्यों नहीं करना चाहिए। क्षमा करें ...

— trejder

यह मेरे लिए काम करता है, विशेष रूप से यदि आप जावास्क्रिप्ट के साथ टूलटिप्स ट्रिगर कर रहे हैं, तो यह तत्व में ही लोड हो जाएगा, धन्यवाद!

— सिंह

Answer 4

यदि आप Angular UI बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप html सिंटैक्स के साथ टूलटिप का उपयोग कर सकते हैं: tooltip-html-unsafe

उदाहरण के लिए कोणीय 1.2.10 और कोणीय-यूआई-बूटस्ट्रैप 0.11 पर अपडेट करें: http://jsfiddle.net/aX2vR/1/

पुराना वाला: http://jsfiddle.net/8LMwz/1/

Answer 5

कोणीय यूआई बूटस्ट्रैप 0.13.X में, टूलटिप-एचटीएमएल-असुरक्षित को हटा दिया गया है। अब आपको html के साथ टूलटिप को पूरा करने के लिए टूलटिप-html और $ sce.trustAsHtml () का उपयोग करना चाहिए।

https://github.com/angular-ui/bootstrap/commit/e31fcf0fcb06580064d1e6375dbedb69f1c95f25

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

Answer 6

कोणीय बूटस्ट्रैप के लिए सीएसएस समाधान है

::ng-deep .tooltip-inner {
  white-space: pre-wrap;
}

यदि आपको इसके उपयोग को प्रतिबंधित करने की आवश्यकता नहीं है, तो आपको मूल तत्व या वर्ग चयनकर्ता का उपयोग करने की आवश्यकता नहीं है। कॉपी / पास्ता, और यह नियम सभी उप-घटकों पर लागू होगा