টুইটার বুটস্ট্র্যাপ টুলটিপগুলিতে একাধিক লাইন থাকবে কীভাবে?

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/> এইচটিএমএল রেন্ডারিং সাইডে কাজ করবে, যখন / এন কেবল আপনার এইচটিএমএল কোডটি নতুন লাইনে প্রদর্শন করবে

— রাজেশ কাকাওয়াত

আমি অন্য কয়েকটি ওয়েবসাইটের দিকে চেয়ে ছিলাম এবং সেগুলি বিআর ছাড়াই মাল্টলাইন টুলটিপস রয়েছে

— ম্যাথু হুই

Answer 1

আপনি white-space:pre-wrapটুলটিপ ব্যবহার করতে পারেন । এটি টুলটিপটিকে নতুন লাইনের প্রতি শ্রদ্ধা করবে। লাইনগুলি ধারকটির ডিফল্ট সর্বাধিক প্রস্থের চেয়ে দীর্ঘ হলে লম্বা হবে will

.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কোনওটিই এইচটিএমএল-এ কোনওটির সাথে কাজ করবে না , এগুলি অবশ্যই সত্যিকারের নতুন লাইনের। বিকল্পভাবে, আপনি এনকোডড নিউলাইনগুলি ব্যবহার করতে পারেন 
, তবে এটি সম্ভবত এর ব্যবহারের চেয়ে কম পছন্দসই <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>। তবে এটি এটি দেয়: aaabbbccc (সংযুক্ত স্ট্রিং)।

— zygimantus

.টোলটিপ-অভ্যন্তর {সাদা স্থান: প্রাক-লাইন; me আমার পক্ষে কাজ করছে।

— কিশোর কে

প্রাক-লাইন আমার পক্ষে কাজ করেছে - অন্য সমস্ত পাঠ্য সঠিকভাবে প্রান্তিক না করা হয়েছে

— অ্যাডাম মোইসা

Answer 2

আপনি এইচটিএমএল বৈশিষ্ট্য ব্যবহার করতে পারেন: 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)আপনার জেএসফিডেলে বিকল্পটি চেক করেননি, যা এটি প্রাথমিক রান (ওপেন) এ কাজ করে না। এটি চিহ্নিত করুন এবং সংরক্ষণ করুন, অন্যরা এটি মেনে চলবে না, যে আপনার উদাহরণ কাজ করে না।

— ট্র্যাজার

Answer 3

আপনি যদি নন-লিঙ্ক উপাদানটিতে টুইটার বুটস্ট্র্যাপ টুলটিপ ব্যবহার করছেন , আপনি নির্দিষ্ট করতে পারেন যে আপনি কেবলমাত্র dataপ্যারামিটারটি ব্যবহার করে জাভাস্ক্রিপ্ট ছাড়াই এইচটিএমএল কোডে একটি মাল্টি-লাইন টুলটিপটি চান :

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

এটি কস্টেলের উত্তরগুলির একটি বিকল্প সংস্করণ । সমস্ত গৌরব তাঁর কাছে যায়! :]

Comments

আপনি কেন "নন-লিঙ্ক উপাদান" বলছেন? আমি এটি একটি লিঙ্কে চেষ্টা করেছি এবং দেখে মনে হচ্ছে এটি ঠিক আছে।

— ec2011

ভাল ... মনে নেই! :] পাঁচ মাস পরে আমার মনে হয় আমি ভুল ছিলাম। আমি এটাও জানি না, কেন এটি লিঙ্কগুলিতে কাজ করা উচিত নয়। দুঃখিত ...

— ট্র্যাজার

এটি আমার জন্য কাজ করেছে, বিশেষত যদি আপনি জাভাস্ক্রিপ্টের সাহায্যে টুলটিপগুলি ট্রিগার করে থাকেন তবে এটি উপাদানটিতে লোড হবে, ধন্যবাদ!

— লিও

Answer 4

আপনি যদি কৌণিক UI বুটস্ট্র্যাপ ব্যবহার করে থাকেন তবে আপনি এইচটিএমএল সিনট্যাক্স সহ টুলটিপ ব্যবহার করতে পারেন: tooltip-html-unsafe

উদাহরণস্বরূপ কৌণিক 1.2.10 এ আপডেট করুন এবং কৌণিক-ইউআই-বুটস্ট্র্যাপ 0.11: http://jsfiddle.net/aX2vR/1/

পুরানো: http://jsfiddle.net/8LMwz/1/

Answer 5

কৌণিক UI বুটস্ট্র্যাপ 0.13.X এ, টুলটিপ-এইচটিএমএল-অনিরাপদ অবমুক্ত করা হয়েছে। এইচটিএমএল দিয়ে একটি টুলটিপটি সম্পন্ন করার জন্য আপনার এখন টুলটিপ-এইচটিএমএল এবং $ 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;
}

কোনও অভিভাবক উপাদান বা শ্রেণি নির্বাচক ব্যবহার করার দরকার নেই যদি এর ব্যবহারকে সীমাবদ্ধ করার প্রয়োজন না হয়। অনুলিপি / পাস্তা এবং এই নিয়মটি সমস্ত উপ-উপাদানগুলির জন্য প্রযোজ্য