Làm cách nào để tạo các chú giải công cụ Twitter Bootstrap có nhiều dòng?

157

Tôi hiện đang sử dụng chức năng dưới đây để tạo văn bản sẽ được hiển thị bằng plugin tooltip của Bootstrap. Làm thế nào đến tooltips multiline chỉ làm việc với  và không \n? Tôi thích rằng không có bất kỳ HTML nào trong các thuộc tính tiêu đề của liên kết của tôi.

Những gì hoạt động

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

Những gì tôi muốn

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

— Matthew Hui
nguồn

1

Bạn có hiểu sự khác biệt giữa \ n và trong HTML không?

— Cole Johnson

2

sẽ hoạt động ở phía kết xuất html, trong khi / n sẽ chỉ hiển thị mã html của bạn trong dòng mới

— rajesh kakawat

Tôi đã xem một số trang web khác và họ có các công cụ đa dòng mà không cần đến

— Matthew Hui

265

Bạn có thể sử dụng white-space:pre-wraptrên tooltip. Điều này sẽ làm cho tooltip tôn trọng các dòng mới. Các dòng sẽ vẫn quấn nếu chúng dài hơn chiều rộng tối đa mặc định của container.

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

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

Nếu bạn muốn ngăn văn bản gói, thay vào đó hãy làm như sau.

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

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

Cả hai thứ này sẽ không hoạt động với một \nhtml, chúng thực sự phải là dòng mới. Ngoài ra, bạn có thể sử dụng các dòng mới được mã hóa , nhưng điều đó thậm chí còn ít được mong muốn hơn so với sử dụng  .

— Chad von Nau
nguồn

1

Bây giờ làm thế nào để bạn làm điều đó với một popover.

— aaa90210

1

@ aaa90210 bạn có thể thử .popover-content { white-space:pre-wrap; }. Tùy thuộc vào nội dung của bạn, .popover-content p { white-space:pre-wrap; }hoặc một cái gì đó tương tự, có thể trông tốt hơn.

— Chad von Nau

Có thể hiển thị các biến JSP trong tooltip như thế này không? Tôi đã thử

<a href="#" rel="tooltip" title="${aaa}                        ${bbb}                        ${ccc}"                        class="example">Show</a>

. Nhưng nó mang lại điều này: aaabbbccc (chuỗi nối).

— zygimantus 04/11/2015

1

.tooltip-Internal {white-space: pre-line;} làm việc cho tôi.

— Kishor K

tiền tuyến làm việc cho tôi - tất cả những người khác làm cho văn bản không phù hợp

— Adam Moisa

221

Bạn có thể sử dụng thuộc tính html: http://jsfiddle.net/UBr6c/

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

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

— Costales
nguồn

1

Bạn chưa kiểm tra Bootstrap 2.0.2 (js only)tùy chọn trong jsFiddle của mình, điều này làm cho nó không hoạt động khi chạy ban đầu (mở). Đánh dấu và lưu nó, để người khác không tuân thủ, ví dụ của bạn không hoạt động.

— trejder

56

Nếu bạn đang sử dụng Twitter Bootstrap Tooltip trên phần tử không liên kết, bạn có thể chỉ định rằng bạn muốn một tooltip nhiều dòng trực tiếp trong mã HTML, không có Javascript, chỉ sử dụng datatham số:

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

Đây chỉ là một phiên bản thay thế của Costales câu trả lời '. Tất cả vinh quang thuộc về anh! :]

— kẻ phản bội
nguồn

2

Tại sao bạn nói "yếu tố không liên kết"? Tôi đã thử điều này trên một liên kết và nó dường như hoạt động tốt.

— ec2011

2

Chà ... tôi không nhớ! :] Sau năm tháng, tôi nghĩ rằng tôi đã sai. Tôi cũng không biết, tại sao nó không nên hoạt động trên các liên kết. Xin lỗi ...

— trejder

1

Cái này hoạt động với tôi, đặc biệt nếu bạn đang kích hoạt các chú giải công cụ bằng javascript, cái này sẽ được tải trong chính phần tử, cảm ơn!

— Leo

16

Nếu bạn đang sử dụng Angular UI Bootstrap, bạn có thể sử dụng tooltip với cú pháp html: tooltip-html-unsafe

ví dụ: cập nhật lên angular 1.2.10 & angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

cái cũ: http://jsfiddle.net/8LMwz/1/

— chakming
nguồn

2

Trong Angular UI Bootstrap 0.13.X, tooltip-html-không an toàn đã bị phản đối. Bây giờ bạn nên sử dụng tooltip-html và $ sce.trustAsHtml () để thực hiện một tooltip với 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>!');

— soote
nguồn

0

Giải pháp CSS cho Angular Bootstrap là

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

Không cần sử dụng phần tử cha hoặc bộ chọn lớp nếu bạn không cần hạn chế sử dụng. Sao chép / Pasta và quy tắc này sẽ áp dụng cho tất cả các thành phần phụ

— Antonis
nguồn