วิธีการทำให้แถบเครื่องมือ Twitter Bootstrap มีหลายบรรทัด?

ฉันกำลังใช้ฟังก์ชั่นด้านล่างเพื่อสร้างข้อความที่จะแสดงโดยใช้คำแนะนำเครื่องมือของ Bootstrap คำแนะนำเครื่องมือหลายอันมาพร้อมกับ<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

คุณสามารถใช้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 พวกเขาจะต้องเป็นจริงขึ้นบรรทัดใหม่ หรือคุณสามารถใช้การขึ้นบรรทัดใหม่เข้ารหัส
แต่ที่อาจจะแม้แต่น้อยที่น่าพอใจกว่าการใช้<br>'s

คุณสามารถใช้คุณสมบัติ 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})

หากคุณใช้Twitter Bootstrap Tooltip ในองค์ประกอบที่ไม่ใช่ลิงค์คุณสามารถระบุได้ว่าคุณต้องการคำแนะนำเครื่องมือหลายบรรทัดโดยตรงในโค้ด HTML โดยไม่ต้องใช้ Javascript โดยใช้dataพารามิเตอร์:

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

นี่เป็นเพียงรุ่นที่ทางเลือกของการCostalesคำตอบ ' ความรุ่งโรจน์ทั้งหมดไปหาเขา! :]

หากคุณใช้ Angular UI Bootstrap คุณสามารถใช้คำแนะนำเครื่องมือด้วยไวยากรณ์ html: tooltip-html-unsafe

เช่นอัปเดตเป็นเหลี่ยม 1.2.10 & angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

อันเก่า: http://jsfiddle.net/8LMwz/1/

ใน Angular UI Bootstrap 0.13.X tooltip-html-unsafe ถูกเลิกใช้แล้ว ตอนนี้คุณควรใช้ tooltip-html และ $ sce.trustAsHtml () เพื่อให้บรรลุคำแนะนำเครื่องมือด้วย html

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>!');

โซลูชัน CSS สำหรับ Angular Bootstrap คือ

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

ไม่จำเป็นต้องใช้องค์ประกอบหลักหรือตัวเลือกคลาสหากคุณไม่ต้องการ จำกัด การใช้งาน คัดลอก / พาสต้าและกฎนี้จะใช้กับส่วนประกอบย่อยทั้งหมด