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 mouseover event thats not a modal would be great. Am I going in the wrong direction?

This table is already using jquery datatables but I don't believe it can do that sort of event.

<tr title='This activity will be open to registration on April 31st' >
.....
</tr>

Answer 1

Nope. You'd need to create your own title substitute with JavaScript.

Answer 2

Native tooltips do not use HTML. jQuery UI tooltips would be very useful here.

Demo: http://jqueryui.com/tooltip/

EDIT : You would need to use the content option to use markup instead of the title attribute.

$(".text")
    .tooltip({ content: '<b style="color: red">Tooltip</b> <i>text</i>' });

Here's a Fiddle demonstrating this: http://jsfiddle.net/acbabis/64Q2m/

Answer 3

No.

HTML can't be placed in an attribute.

If the goal is to have a pop-up with rich content, then you need to handle this via javascript. In addition, from an accessibility standpoint, you likely don't want to put that amount of content into the title attribute anyways, so going the JS route is going to solve a few problems for you. Google 'JS Tooltip' for dozens of options.

Answer 4

您可以使用jquery ui工具提示插件显示自定义标题

Answer 5

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 6

There is no direct way to render HTML code written inside a tooltip. However, if you are using jQueryUI (or, if you can) then the code below will show the HTML effect (render) and not the HTML code in the tooltip.

Requirements : jQuery, jQueryUI.js, jQueryUI.css

HTML Code:

<tr data-title='This activity will be open to registration on <b>April 31st</b>'>.....</tr>

JavaScript:

$(function() {
        $( document ).tooltip({
              items: '[title], [data-title]',
              track:true,
              content: function(){
                  var element = $( this );
                    if ( element.is( "[title]" ) ) {
                      return element.attr( "title" );
                    }
                    if ( element.is( "[data-title]" ) ) {
                      return element.attr( "data-title" );
                    }
              }
        });
});

Answer 7

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

Answer 8

I think a good option is to put that content inside a data attribute, something like this:

<div data-tooltip="Some information I want to show">
    Actual content
</div>

And then, write a simple jQuery plugin that shows that content inside an element upon hover over.