[html] 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에서 a와 함께 작동하지 않으며 실제로 실제 개행이어야합니다. 또는 인코딩 된 개행 문자를 사용할 수 
있지만 이는 <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})
답변
당신이 사용하는 경우 트위터 부트 스트랩 이 아닌 링크 요소에 도구 설명, 당신은 단지 사용하여 자바 스크립트없이 당신이 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>!');
답변
Angular Bootstrap의 CSS 솔루션은 다음과 같습니다.
::ng-deep .tooltip-inner {
white-space: pre-wrap;
}
사용을 제한 할 필요가없는 경우 부모 요소 또는 클래스 선택기를 사용할 필요가 없습니다. 복사 / 파스타,이 규칙은 모든 하위 구성 요소에 적용됩니다.