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