Twitter 부트스트랩 툴팁에 여러 줄이 포함되도록 만드는 방법은 무엇입니까?

Twitter 부트스트랩 툴팁에 여러 줄이 포함되도록 만드는 방법은 무엇입니까?

저는 현재 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에서, 그것들은 실제로 새로운 줄이어야 합니다.또는 인코딩된 새 줄을 사용할 수 있습니다.
하지만 그것은 아마도 사용하는 것보다 훨씬 더 바람직하지 않을 것입니다.<br>의

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을 사용하는 경우, Javascript 없이 HTML 코드로 직접 다중 줄 Tooltip을 사용하도록 지정할 수 있습니다.data매개변수:

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

이것은 코스탈레스의 답변의 대체 버전일 뿐입니다.모든 영광이 그에게 돌아갑니다! :]

Angular UI Bootstrap을 사용하는 경우 툴팁을 HTML 구문과 함께 사용할 수 있습니다.tooltip-html-unsafe

예: angular 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 솔루션은 다음과 같습니다.

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

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

언급URL : https://stackoverflow.com/questions/13338780/how-to-make-twitter-bootstrap-tooltips-have-multiple-lines