How to use html in Foundation's tooltips?

Question

Is it possible to use html in Foundation's tooltips?

Answer 1

Yes. It supports html in the title attribute.

from foundation.tooltip.js:

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

Breaking that down it creates a new element wrapped in a div and the contents of the title attribute are inserted into the div using the html() method which will convert any markup in the string to html elements.

The following code:

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

Will result in a tool tip that looks like

This is bold This is not

Answer 2

In Foundation v6.3+, you can append the attribute data-allow-html="true" to the element to allow html in the tooltip.

For example:

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

Here it is working in jsfiddle.

For more information, check out the pull request.