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

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

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.

Answer 4

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

Answer 5

You can use jquery ui tooltip plugin for showing custom title

Answer 6

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.