Foundation의 툴팁에서 html을 사용하는 방법은 무엇입니까?

Question

Foundation의 툴팁에 html을 사용할 수 있습니까?

Answer 1

예. 그것은 지원합니다. this link을 확인하십시오. 나는 간단한 HTML과 그 지원을 시도했다. title 속성에 html을 넣어야합니다.

Answer 2

예. title 속성에서 html을 지원합니다. foundation.tooltip.js에서

: 그것은 div 래핑 새로운 요소를 생성 위해서 다운

create : function ($target) { 
    var $tip = $(this.settings.tip_template(this.selector($target), $('<div></div>').html($target.attr('title')).html())), 
    ... 

나누고 title 속성의 내용이되는 것이다 html() 방법을 사용 div에 삽입 문자열의 모든 마크 업을 html 요소로 변환합니다.

다음 코드 :

<img src="example.png" 
    class="general-infotip has-tip tip-top" 
    data-tooltip 
    title="<b>This is bold</b> This is not" /> 

이

과 같은 도구 팁이 발생할 것인가는이가 아닌 대담

재단 v6.3과에서

Answer 3

+ 요소에 data-allow-html = "true"속성을 추가하여 툴팁에서 html을 허용 할 수 있습니다. 예를 들어

: 여기

<span data-tooltip data-allow-html="true" aria-haspopup="true" 
     class="has-tip" data-disable-hover="false" tabindex="1" 
     title="Fancy word for a <strong>beetle</strong>. <br><br><img src=https://pbs.twimg.com/profile_images/730481747679432704/uc08_dqy.jpg />"> 

    Scarabaeus 

</span> 

는 jsfiddle에서 작동된다.

자세한 내용은 pull request을 확인하십시오.