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をご覧ください。