Twitter Bootstrap의 툴팁으로 복잡한 HTML을 사용할 수 있습니까?

Question

내가 official documentation을 선택하면, 나는라는 속성 HTML을 볼 수

Name | Type  | default | Description 
---------------------------------------------------------------------------- 
html | boolean | false | Insert html into the tooltip. 
              If false, jquery's text method 
              will be used to insert content 
              into the dom. Use text if you're 
              worried about XSS attacks. 

그것은 말한다, "툴팁에 HTML을 삽입"하지만 유형은 부울입니다. 툴팁에서 어떻게 복잡한 html을 사용할 수 있습니까?

Answer 1

이 매개 변수는 툴팁에 복잡한 html을 사용할지 여부에 관한 것입니다. true으로 설정 한 다음 html을 태그의 title 속성으로 누르십시오.

이 바이올린 here을 참조하십시오 - 나는 <a> 태그에 data-html="true"을 통해 true로 HTML 속성을 설정 한 후 바로 예제로 HTML 임시로 추가했습니다.

Answer 2

그냥 data-original-title를 사용하여, 정상적으로 :

HTML :

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div> 

자바 스크립트 :

$("[rel=tooltip]").tooltip({html:true}); 

는 HTML 매개 변수는 툴팁 텍스트가 DOM 요소로 전환되는 방법을 지정합니다. 기본적으로 HTML 코드는 툴팁으로 이스케이프 처리되어 XSS 공격을 방지합니다. 사이트에 사용자 이름을 표시하고 툴팁에 작은 약력을 표시한다고 가정 해보십시오. html 코드가 이스케이프되지 않고 사용자가 직접 바이오를 편집 할 수 있다면 악성 코드를 주입 ​​할 수 있습니다.

Answer 3

"html"옵션을 true로 설정하면 툴팁에 html을 넣을 수 있습니다. 실제 HTML은 옵션 "제목"에 의해 결정된다 (링크의 제목 속성이 설정되어서는 안)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true}); 

Live sample

Answer 4

html 데이터 속성은 그것이 워드 프로세서에 난데 정확히 않습니다. |>bootstrap 2.x -

<span rel="tooltip" 
    data-toggle="tooltip" 
    data-html="true" 
    data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>" 
> 
hover over me to see HTML 
</span> 

jsfiddle 데모 : (설명을위한 라인으로 breaked) nessecary없이 자바 스크립트이 작은 예를보십시오

<!-- Tooltip link --> 
<p><span class="tip" data-tip="my-tip">Hello world</span></p> 

<!-- Tooltip content --> 
<div id="my-tip" class="tip-content hidden"> 
    <h2>Tip title</h2> 
    <p>This is my tip content</p> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     // Tooltips 
     $('.tip').each(function() { 
      $(this).tooltip(
      { 
       html: true, 
       title: $('#' + $(this).data('tip')).html() 
      }); 
     }); 
    }); 
</script> 

복잡한을 만들 수 있습니다이 방법 : 당신의 도구 설명을 만들 때이 div에에 데이터 제목에 HTML을 삽입 방지하기 bootstrap 3.x

Answer 5

또 다른 해결책은 툴팁 HTML 콘텐츠와 독립적 인 사업부를 작성하고, 참조하는 것입니다 읽을 수있는 HTML 컨텐트를 만들고 원하는만큼 많은 툴팁을 활성화하십시오.

라이브 데모 here on codepen