Tooltips on hyperlinked fields in table

nat5142

I've created a DataTable which includes a column of 4-character identifiers for certain meteorological data collection stations. I have a database which includes a record for each individual station. For example, in my database station KPHL has name: "Philadelphia", state: "PA", country: "US", latitude: 39.87, longitude: -75.23, elevation: 18.

I would like for the user to be able to hover over a specific hyperlinked station ID in the table, which would then display the relevant information from the database in the tooltip window. So if a user hovers over the blue "KPHL" in my table, they see the following information in a tooltip window:

Station Name: PHILADELPHIA
State: PA
Country: US
Latitude: 39.87
Longitude: -75.23
Elevation: 18

I'd like to implement AJAX for this. Is there built-in functionality for tooltips in DataTables? Or will I have to use a separate jQuery event?

bindrid

I found an other library that I have incorporated into my datatables that takes care of displaying extra info via ajax.
See if http://qtip2.com/ might help you out

rf1234

@bindrid: Great idea! Could you post some sample code to see how you use it with datatables for us lazy guys? Many thanks in advance!

rf1234

Got it started now. This is an example for tooltips in a simple editor instance:

CDN's for qtip:

<!--Tooltips qtip2-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>

<!--Tooltips qtip2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" rel="stylesheet"/>

manipulate the default configuration:

//set the global qtip options
//see: http://qtip2.com/options#global
$.extend( true, $.fn.qtip.defaults, {
    style: {
        classes: 'qtip-bootstrap'
    }
});

Use it with Editor to explain field contents:

var forexEditor = new $.fn.dataTable.Editor( {
    ajax: {
        url: 'actions.php?action=tblForex'
    },
    table: "#tblForex",
    fields: [ {
            label: "Currency:",
            name:  "forex.currency",
            type:  "select",
            options: forexCurrencyOptions
        }, {
            label: "Exchange Rate Date:",
            name:  "forex.date",
            attr: {
                class: dateMask
            },
            type:  "datetime",
            def:   function () { return today},
            format: 'L',
            opts:  {
                showWeekNumber: true,
                momentLocale: momentLocale
            }
        }, {
            label: "Exchange Rate Currency/EUR:",
            name:  "forex.rate"
        }
    ]        
} );

forexEditor
        .on('open', function(e, mode, action) {   
            $(this.node( 'forex.currency' )).qtip({
                content: {text: 'Please select one of the currencies from the list!'}
            });
            $(this.node( 'forex.date' )).qtip({
                content: {text: 'Please enter a date for the exchange rate!'}
            });
            $(this.node( 'forex.rate' )).qtip({
                content: {text: 'Please enter a rate for the respective date!'}
            });
            if (lang === 'de') { //translation of Editor labels and tooltips
                translForexEditor(this); 
            }   
        });

function translForexEditor(e) {
    var o = 'option'; var c = 'content.text';
    e.field( 'forex.currency' ).label('Währung:');
    e.field( 'forex.date' ).label('Datum:');
    e.field( 'forex.rate' ).label('Kurs:');
    $(e.node( 'forex.currency' )).qtip(o,c, 'Bitte wählen Sie eine Währung aus der Liste!');
    $(e.node( 'forex.date' )).qtip(o,c, 'Bitte geben Sie ein Datum für den Bewertungskurs ein!');        
    $(e.node( 'forex.rate' )).qtip(o,c, 'Bitte geben Sie einen Bewertungskurs für den Stichtag ein!');        
}

@bindrid: According to http://qtip2.com/plugins#ajax the use of Ajax is discouraged because it is deprecated. I also added a solution to translate the tooltips in case of foreign language requirements.

prats

$('#SigOpenTick').on( 'hover', 'tr td', function () {
        if($(this).hasClass("ticketid")){
            $(this).append($('<div class="updateTicket" title="Update Ticket" onclick=""><span class=\'update\'>Update Ticket</span></div>.fadeIn('slow'));
        }
    });

bindrid

I built this in my dev environment for straight datatables with a .net back end.

        $(document).ready(function () {

            var table = $('#example').DataTable({
                "processing": true,
                rowId: "employeeId",
                "columns": [
                    {"defaultContent":"", className:"details"},
                    { "data": "first_name", className:"details" },
                    { "data": "last_name"},
                    { "data": "position" },
                    { "data": "office", },
                    { "data": "extn" },
                    { "data": "start_date" },
                    { "data": "salary" }
                ],
                "select": "multi",
                "lengthMenu": [5, [10, 15, 25, 50, -1], [5, 10, 15, 25, 50, "All"]],
                "pageLength": 5,
                "ajax": {
                    contentType: "application/json; charset=utf-8",
                    url: "wsSample.asmx/GetAllEmployees",
                    type: "Post",
                    dataSrc: "d"
                },
                order: [[0, 'asc']]
            });


            $(document).on('mouseover', 'tbody .details', function (event) {
                var me = this;
                var rowData = table.row(this).data();

                // qtip ajax has been depricated so doing the ajax externally.
              
                $.ajax({
                    url: "wsSample.asmx/getEmployee",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ employeeId: rowData.employeeId }),
                    type: "post",
                    success: function (response) {
                        $(me).qtip({
                            overwrite: true, // Make sure the tooltip won't be overridden once created
                            content: response.d.first_name,
                            show: {
                                event: event.type, // Use the same show event as the one that triggered the event handler
                                ready: true // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!
                            }
                        }, event); // Pass through our original event to qTip
                    }
                });
            });
        });

rf1234

@bindrid, many thanks for getting back with this!
Roland

vjsam

hi Bindrid,

Am getting the below exception on $(me).qtip({

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'qtip'

Any help /Suggestion is appreciated

MY Source code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="/Content/DataTables-1.10.0-beta/css/jqueryui.css" rel="stylesheet" />
<script src="/Scripts/DataTables-1.10.0-beta/jquery.dataTables.js"></script>
<script src="/Scripts/DataTables-1.10.0-beta/jquery.dataTables.plugins.js"></script>
<script src="/Scripts/App/jquery-ui.js"></script>
<link href="/Content/themes/app/Qtip.css" rel="stylesheet" />
<script src="/Scripts/App/Qtip.js"></script>


<script type="text/javascript">

    $(document).ready(function () {

        $(document).on('mouseover', 'tbody .details', function (event) {
            debugger;
            var me = this;
            // var rowData = table.row(this).data();
            $(me).qtip({
                overwrite: true, // Make sure the tooltip won't be overridden once created
                content: "testing",
                show: {
                    event: event.type, // Use the same show event as the one that triggered the event handler
                    ready: true // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!
                }
            }, event);
        })
     
     
    });
</script>

Thanks
Vj

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Looks like you are loading the qtip JS, so really you'd need to give a link tp a page showing the issue.

Allan

vjsam

Thanks Allan for your response. I have implemented the tooltip using Bootstrap tooltip and knock out now.