Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82563

Tooltips with qtip on child row titles

$
0
0

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


Viewing all articles
Browse latest Browse all 82563

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>