Is it possible to add html inside a title attribute?

Question

Is there a way to put actual html code inside a title attribute on a table row element? My goal is to pop-up not only text but some info-graphics along with it, so a mouseo

Answer 1

Instead of focusing on the title attribute, enclose a popup message with tags inside the target <td></td> (table data element). Then put a class in that td to control the div with CSS, hiding it first, then making its contents visible when the mouse hovers over the specific table data element. Something like this:

<tr><td class="info-tooltip">This activity will be open to registration on April 31st <div>[ *the contents you would want to popup here* ]</div></td></tr>

Your CSS then might be something like:

td.info-tooltip div {

display:none;

}

td.info-tooltip:hover {

position:relative;
cursor:pointer; 

}

td.info-tooltip:hover div {

position:absolute; /* this will let you align the popup with flexibility */
top: 0px; /* change this depending on how far from the top you want it to align */
left: 0px; /* change this depending on how far from the left you want it align */
display:block; 
width: 500px; /* give this your own width */

}

Answer 2

Using Bootstrap Tooltips one can do the following

<span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>this has an html supported tooltip</span>

for me it happens automatically but you might need to trigger it with javascript.

$(function () { $('[data-toggle="tooltip"]').tooltip() })

docs