Tooltips with qtip on child row titles

rf1234

Hi I am using tooltips on column headers. But when a column header disappears into a child row because it gets hidden by "responsive" my simple id based logic didn't work any longer. In a rather cumbersome process I figured out how to make this work but I don't like it. Does anyone have something simpler, more elegant?

This is the HTML:

<div class="container">
    <h2 style="text-align:justify"><span id="fxHeading"</span>Exchange Rates</h2>
    <div class="row" id="divBtnForexLoad">
        <div class="form-group">
            <div class="col-md-1">
                <button onclick="$.getScript('js/datatables/tblForex.js');" class="btn btn-primary btn-sm" id="btnForexLoad">
                    Load Data</button>
            </div>
        </div>
    </div>
</div>
<br>
<div class="container"> 
    <table id="tblForex" class="table table-striped table-bordered forexTables hidden"
           cellspacing="0" width="100%">
        <thead>
            <tr>
                <th id="fxCurrency">Currency</th>
                <th id="fxDate">Date</th>
                <th id="fxRate">Rate</th>
                <th id="fxTimestamp">Timestamp</th>
            </tr>
        </thead>
    </table>
</div>

And the rather lengthy Javascript code because I have to call qtip twice for each header column because it might have been moved to a child row by "responsive" ...

$('#fxHeading').qtip({ content: { text: fxHeading() } });
function fxHeading() { return lang === 'de' ?         
    'Liste aller verfügbaren EZB-Devisen-Bewertungskurse.' :
    'List of all available ECB Forex Rates' };

$('#fxCurrency').qtip({ content: { text: fxCurrency() } });
function fxCurrency() { return lang === 'de' ?         
    'ISO Währungscodes: USD, GBP, CHF, JPY, AUD, CAD, CNY, DKK, SEK, \n\
     NOK, CZK, PLN, HUF und RUB.' :
    'ISO Currency Codes: USD, GBP, CHF, JPY, AUD, CAD, CNY, DKK, SEK, \n\
     NOK, CZK, PLN, HUF and RUB.' };

$('#fxDate').qtip({ content: { text: fxDate() } });
function fxDate() { return lang === 'de' ? 
    'Datum des Bewertungskurses' :
    'Date of Forex rate' };

$('#fxRate').qtip({ content: { text: fxRate() } });
function fxRate() { return lang === 'de' ? 
    'Bewertungskurs' :
    'Forex rate' };

$('#fxTimestamp').qtip({ content: { text: fxTimestamp() } });     
function fxTimestamp() { return lang === 'de' ? 
    'Zeitstempel der Verarbeitung des Kurses' :
    'Timestamp of Forex rate processing' };

$('#tblForex').on( 'click', 'tbody td.childRowCol', function (e) {
    $('.dtr-title').each(function() {
        switch ($(this).text()) {
            case $('#fxTimestamp').text():
                $(this).qtip({ content: { text: fxTimestamp() } });
                break;
            case $('#fxRate').text():
                $(this).qtip({ content: { text: fxRate() } });
                break;
            case $('#fxDate').text():
                $(this).qtip({ content: { text: fxDate() } });
                break;
            case $('#fxCurrency').text():
                $(this).qtip({ content: { text: fxCurrency() } });
                break;
        }
    })
} );

And then I also had to add this to the data table definition because otherwise jQuery doesn't find all of the tds.

columnDefs: [        
        { targets: [0], className: "childRowCol" }
    ],

Again I'd be grateful for any suggestions to make this a lot simpler ...

allan

Yes, attributes aren't copied from the header cells to their Responsive counterparts so you probably would need a workaround similar to that. Perhaps Responsive should automatically copy over the title attribute. I've added that to my list.

Allan

rf1234

Played around with it a little and tried to enhance my code. Now I call the tooltips functions just once after everything has been loaded regardless on what page I am on.

$(document).ajaxStop(function () {
        $('#content').fadeIn('fast');
        $.busyLoadFull("hide", { 
          // options here 
        });  
        //"api: true" - means it is a data table
        $.fn.dataTable
            .tables( { visible: true, api: true } )
            .columns.adjust();
        tooltipsHeadings();
        tooltipsSelectors();        
        tooltipsTable();
    });

I ordered the tooltips hierarchically. The least specifc texts first so that they get overwritten by more specific tooltips if relevant.

function tooltipsTable() {
    //we can select by class or by text cotents of the table headings.
    //this list should be ordered starting with the least specific selector
    //and then becoming more an more detailed this way we can make sure leas
    //specific information gets overwritten by more specific if required.
    //for most tooltips it is not required to set a class in the HTML
    qtipSettings(); 
    
    $('th:contains(Instrument)').qtip({ content: { text: ttInstrument() } });
    function ttInstrument() { return lang === 'de' ? 
        'Finanzinstrument' : 'Financial Instrument' };
    
    $('th:contains(Timestamp)').qtip({ content: { text: ttTimestamp() } });
    function ttTimestamp() { return lang === 'de' ? 
        'Zeitstempel der letzten Aktualisierung' : 'Timestamp of last update' };
    
    $('.ttCurrency').qtip({ content: { text: ttCurrency() } });
    function ttCurrency() { return lang === 'de' ?         
        'ISO Währungscodes' : 'ISO Currency Codes' };

    $('.ttDate').qtip({ content: { text: ttDate() } });
    function ttDate() { return lang === 'de' ? 
        'Datum' : 'Date' };

    $('.ttRate').qtip({ content: { text: ttRate() } });
    function ttRate() { return lang === 'de' ? 
        'Kurs' : 'Rate' };      
   
    $.fn.dataTable.tables({api: true}).on( 'click', 'tbody', function (e) {
        //we don't use "else if" to have the hierarchy of becoming more specific
        qtipSettings();
        $('.dtr-title').each(function() {
            var title = $(this).text();
            if (title === 'Instrument') { 
                $(this).qtip({ content: { text: ttInstrument() } }); 
            }
            if (title === 'Timestamp') { 
                $(this).qtip({ content: { text: ttTimestamp() } }); 
            }
            if ( title === $('.ttCurrency').text() ) {
                $(this).qtip({ content: { text: ttCurrency() } });
            }
            if ( title === $('.ttDate').text() ) {
                $(this).qtip({ content: { text: ttDate() } });   
            } 
            if ( title === $('.ttRate').text() ) {
                $(this).qtip({ content: { text: ttRate() } });
            }
        })
    } );    
}

For Editor it is a little more complicated. I need to call this function in every Editor instance "on open", but that's all.

function tooltipsEditor() {
    qtipSettingsEditor();
    //search for Editor Fields that end with currency etc.!
    //  id is DTE_FIELD_forex-currency so the period is replaced by a -
    //  $("[id ^= DTE_Field][id $= -currency]").qtip
    //alternatively you can use the API like this:
    //  $(e.node( 'forex.date' )).qtip
    //hierarchical order: "date" gets overwritten by "payment_date" if it's there
    
    $("[id ^= DTE_Field][id $= currency]").qtip({ content: { text: lang === 'de' ?          
        'Bitte wählen Sie eine Währung aus der Liste!' :
        'Please select one of the currencies from the list!' }
    });
    $("[id ^= DTE_Field][id $= date]").qtip({ content: { text: lang === 'de' ?         
        'Bitte geben Sie ein Datum ein!' :
        'Please enter a date!' }
    });
    $("[id ^= DTE_Field][id $= payment_date]").qtip({ content: { text: lang === 'de' ?         
        'Bitte geben Sie einen Zahlungstermin ein!' :
        'Please enter a payment date!' }
    });
    $("[id ^= DTE_Field][id $= -rate]").qtip({ content: { text: lang === 'de' ?         
        'Bitte geben Sie einen Kurs ein!' :
        'Please enter a rate!' }
    });    
}

allan

Just as an update to this (I know its an old one and you've got your use case working, but in case anyone reads this from a search result), I was looking at the issue I filed about copying title attributes over to the responsive display, and I don't think I'll include that ability at the moment. While I can see it being useful for this sort of thing, 99% of cases won't use a title attribute, to it will be wasted clock cycles. The way to do it instead is to use a custom renderer - I've put little example together here: http://live.datatables.net/xixovito/1/edit .

Allan