현재 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/
이들 중 어느 것도 \nhtml에서 a와 함께 작동하지 않으며 실제로 실제 개행이어야합니다. 또는 인코딩 된 개행 문자를 사용할 수 
있지만 이는 <br>'s를 사용하는 것보다 덜 바람직 할 것 입니다.
.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 (연결된 문자열)를 제공합니다.
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})
Bootstrap 2.0.2 (js only)jsFiddle에서 옵션을 선택 하지 않아 초기 실행 (열기)에서 작동하지 않습니다. 표시하고 저장하면 다른 사람이 준수하지 않고 예제가 작동하지 않습니다.
당신이 사용하는 경우 트위터 부트 스트랩 이 아닌 링크 요소에 도구 설명, 당신은 단지 사용하여 자바 스크립트없이 당신이 HTML 코드에서 직접 여러 줄 툴팁을 원하는 지정할 수 있습니다 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
예 : angular 1.2.10 및 angular-ui-bootstrap 0.11 업데이트 : http://jsfiddle.net/aX2vR/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>!');