Twitter Bootstrap의 툴팁과 함께 복잡한 HTML을 사용할 수 있습니까?

공식 문서를 확인하면 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을 어떻게 사용할 수 있습니까?

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

이 바이올린을 여기에서보십시오 - 태그 data-html="true"에서를 통해 html 속성을 true로 설정 <a>한 다음 html ad hoc에 예제로 추가했습니다.

평소와 같이 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 코드가 이스케이프되지 않고 사용자가 바이오를 직접 편집 할 수 있으면 악성 코드가 삽입 될 수 있습니다.

데이터 제목에 html을 삽입하지 않는 또 다른 솔루션 은 툴팁 html 컨텐츠로 독립 div를 작성하고 툴팁을 작성할 때이 div를 참조하는 것입니다.

<!-- 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>

이 방법으로 복잡한 읽을 수있는 html 컨텐츠를 작성하고 원하는만큼 툴팁을 활성화 할 수 있습니다.

코드 펜에 대한 라이브 데모

html데이터 속성은 그것이 문서에 난데 정확히 않습니다. 이 작은 예제를 사용해보십시오. JavaScript가 필요하지 않습니다 (설명을 위해 줄 바꿈).

<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 데모 :

• 부트 스트랩 2.x
• 부트 스트랩 3.x

html을 툴팁으로 사용하려면 "html"옵션을 true로 설정하십시오. 실제 html은 "title"옵션에 의해 결정됩니다 (링크의 title 속성은 설정하지 않아야합니다)

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

라이브 샘플