CODEWITHSUNDEEP
javascriptjqueryhtml
Maelish
Maelish

Reputation: 1629

Is it possible to add html inside a title attribute?

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>

Upvotes: 19

Views: 45617

Answers (8)

ryan2johnson9
ryan2johnson9

Reputation: 724

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

Upvotes: 3

jainashish
jainashish

Reputation: 5183

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" );
                    }
              }
        });
});

Upvotes: 4

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

You can use jquery ui tooltip plugin for showing custom title

Upvotes: 4

jpaulino
jpaulino

Reputation: 31

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

}

Upvotes: 3

MadKian88
MadKian88

Reputation: 162

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.

Upvotes: 0

aebabis
aebabis

Reputation: 3705

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/

Upvotes: 6

DA.
DA.

Reputation: 40663

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.

Upvotes: 6

j08691
j08691

Reputation: 207861

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

Upvotes: 18

Related Questions