फाउंडेशन के टूलटिप्स में एचटीएमएल का उपयोग कैसे करें?

Question

क्या फाउंडेशन के टूलटिप्स में एचटीएमएल का उपयोग करना संभव है?

Answer 1

हाँ। यह समर्थन करता है। देखें। मैंने सरल एचटीएमएल और उस समर्थन की कोशिश की। आपको शीर्षक विशेषता में एचटीएमएल रखना होगा।

Answer 2

हां। यह शीर्षक विशेषता में एचटीएमएल का समर्थन करता है।

foundation.tooltip.js से

:

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

ब्रेकिंग कि नीचे यह एक नए तत्व एक div में लिपटे बनाता है और शीर्षक विशेषता की सामग्री 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" /> 

एक टूल टिप उस तरह

लग रहा है में परिणाम होगा इस साहसिक यह नहीं है

Answer 3

फाउंडेशन v6.3 में + , आप टूलटिप में एचटीएमएल को अनुमति देने के लिए तत्व को डेटा-अनुमति-html = "true" जोड़ सकते हैं।

उदाहरण के लिए:

<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 देखें।