[html] Twitter Bootstrap 툴팁에 여러 줄을 만드는 방법은 무엇입니까?

Question 1

현재 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

Question 2

white-space:pre-wrap툴팁에서 사용할 수 있습니다 . 이렇게하면 툴팁이 새 줄을 존중하게됩니다. 컨테이너의 기본 최대 너비보다 길면 줄이 계속 줄 바꿈됩니다.

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

텍스트 줄 바꿈을 방지하려면 대신 다음을 수행하십시오.

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

이들 중 어느 것도 \nhtml에서 a와 함께 작동하지 않으며 실제로 실제 개행이어야합니다. 또는 인코딩 된 개행 문자를 사용할 수 있지만 이는 <br>‘s를 사용하는 것보다 덜 바람직 할 것 입니다.

Question 3

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})

Question 4

당신이 사용하는 경우 트위터 부트 스트랩 이 아닌 링크 요소에 도구 설명, 당신은 단지 사용하여 자바 스크립트없이 당신이 HTML 코드에서 직접 여러 줄 툴팁을 원하는 지정할 수 있습니다 data매개 변수를 :

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

이것은 costales 의 대답 의 대체 버전입니다 . 모든 영광이 그에게갑니다! :]

Question 5

Angular UI Bootstrap을 사용하는 경우 html 구문으로 도구 설명을 사용할 수 있습니다. tooltip-html-unsafe

예 : angular 1.2.10 및 angular-ui-bootstrap 0.11 업데이트 :
http://jsfiddle.net/aX2vR/1/

Question 6

Angular UI Bootstrap 0.13.X에서 tooltip-html-unsafe는 더 이상 사용되지 않습니다. 이제 tooltip-html 및 $ sce.trustAsHtml ()을 사용하여 html로 도구 설명을 작성해야합니다.

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

Question 7

Angular Bootstrap의 CSS 솔루션은 다음과 같습니다.

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

사용을 제한 할 필요가없는 경우 부모 요소 또는 클래스 선택기를 사용할 필요가 없습니다. 복사 / 파스타,이 규칙은 모든 하위 구성 요소에 적용됩니다.