Using tooltips with DataTables

jaredgerber

I can't seem to get my tooltip to fire on my table. I haven't seen any examples or questions about this for quite a while -- am I doing something wrong here?

    var table = "";
    $(document).ready(function()
    {

        $('#agent tbody tr').each( function() {
            var sTitle;
            var nTds = $('td', this);
            var sTip = $(nTds[1]).text();
            sTitle = sTip+' is the Agent.';
            this.setAttribute( 'title', sTitle );
        } );
        
        /* Init DataTables */
                
        $("#pleasewait").show();
        table = $('#agent').dataTable( {
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "php/processList.php?list=agent&has_form=true"
        } );


        /* Apply the tooltips */
        $('#agent tbody tr[title]').tooltip( {
            "delay": 0,
            "track": true,
            "fade": 250
        } );

allan

You are using server-side processing, so tooltip (and the title attributes) and being set on cells that don't yet exist (since the table data won't have loaded in this case). You could do those actions in the fnDrawCallback function since it will run for every page.

Allan

jaredgerber

Ahhh -- ok -- I'm getting it. Again, slowly :-)

I got it to work, but how do I apply style -- like on this example?
https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html

I'm looking to apply a little css and add multiple lines of information (e.g., 5 other fields) on the popup -- will this method work for that?

allan

That example uses this tooltip library (it was the first one I found from Googling back when I wrote that example). If it isn't being styled then you probably need to include the tooltip's stylesheet. As for its capabilities you would need to refer to its documentation.

Allan

jaredgerber

Ok -- so I finished this cool new BIG hover popup using bootstrap tooltip -- yayy -- it's pretty. And it works with bServerSide enabled.

I'm successfully loading data from the TD cells into the tooltip; however, I need access to other fields that are not in the dataTable cells. What would be the best approach for this? Should I hide the whole title string in the dataTable somewhere then transfer it to the TR title after the dataTable loads? Is there a more efficient way to do it? Can I just load the title into the TR when initializing the dataTable?

Sample here:
http://174.120.222.66/~opes/agent/rpt_agent.php

        <script>
        var table = "";
        $(document).ready(function()
        {

        /* Init DataTables */
        $("#pleasewait").show();

        table = $('#agent').dataTable( {
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "php/processList.php?list=agent&has_form=true",

           "fnDrawCallback": function( oSettings ) {
            $('#agent tbody tr').each( function() {
                var sTitle;
                var nTds = $('td', this);
                var sAg = $(nTds[1]).text();
                var sEm = $(nTds[5]).text();
                var sPh = $(nTds[4]).text();
                var sUpv = $(nTds[3]).text();
                sTitle = '<div class="tt">'+sAg+'<br> \
                        '+sPh+'<br> \
                        '+sEm+'<br> \
                        PO Box 4046<br> \
                        Chatsworth, CA 91313<br><br> \
                        Upline Agent : OFS3893 John Doe<br> \
                        Upline VP : '+sUpv+'<br> \
                        VPs Under : 9<br> \
                        Ring Earners Under : 9<br><br> \
                        Personal<br> \
                        Cashflow (12mo) : $99,999<br> \
                        Points (12mo) : 99999<br> \
                        Recruits (12mo) : 9<br><br> \
                        Baseshop<br> \
                        Points (12mo) : 999,999<br> \
                        Recruits (12mo) : 9<br></div>';

                this.setAttribute( 'class', 'ttop');
                this.setAttribute( 'title', sTitle );
            } );
        
        /* Apply the tooltips */
        table.$('tr').tooltip( {
                placement : '',
                html : true
        } );        
        }
    } );

allan

You could use the DT_RowAttr option to return the title attribute you want in the JSON data. Note you need to be using the nightly version of DataTables for this - it will be in 1.10.5 which is due for release next week.

Allan

jaredgerber

So ... just hold tight for now? Nightly?

allan

Personally I'd use the nightly - but it is up to you :-).

Allan

jaredgerber

Ok - I get it. It's like beta.

allan

Sort of. A beta implies a particular milestone. The nightly however is a build of the very latest changes that I've made. It is possible that buys are included by mistake as a result, although it is (generally...) rare. The nightly contains all changes to date.

Allan

jaredgerber

Nice. Nightlys it is :-)

jaredgerber

I'm trying to use the DT_RowAttr to create a unique title for each row. I created a field agent.title that looks like this:

714-555-1212<br>johndoe@gmail.com<br>Orange

It's the 2nd value in the data shown in the data below.

And I'd like to pass that as the title for each TR. I can see I can make the DT_RowAttr setting in the first array, but how to I get it from the columns into the title of the TR?

var table = "";
$(document).ready(function()
{
    /* Init DataTables */
    $("#pleasewait").show();

    table = $('#agent').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "php/processList.php?list=agent&has_form=true"
,
       "fnDrawCallback": function( oSettings ) {
  
    if ( data.DT_RowAttr ) $.each( data.DT_RowAttr, function( key, value ) {
        $(tr).attr( key, value );
    });         
    
    /* Apply the tooltips */
    table.$('tr').tooltip( {
            placement : '',
            html : true } );        
    }
} );

Here is my header data:

{"sEcho":0,"iTotalRecords":"1306","iTotalDisplayRecords":"1306","DT_RowAttr":"{class:\"ttop\",title:\"This will the Title\"}","sSumCol":"","fSum":0,"aaData":[
["","714-555-1212<br>admin@gmail.com<br>McKinney","OFS DEFAULT (default) CEO","McKinney, TX"," () ","714-555-1212","admin@gmail.com","08\/01\/2012"],
["","714-555-1212<br>admin@gmail.com<br>McKinney","OFS DEFAULT (default) CEO","McKinney, TX"," () ","714-555-1212","admin@gmail.com","08\/01\/2012"]...

allan

Your JSON data doesn't include DT_RowAttr for each row.

In this example click the Ajax load tab just below the table. You will see each object contains DT_RowId. The same principle applies for DT_RowAttr.

Allan

jaredgerber

Ohhh -- I need the Object format for this function to work.