Answers

• bindrid Posts: 730Questions: 0Answers: 119

  July 2017

  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 Posts: 2,809Questions: 85Answers: 406

  July 2017

  @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 Posts: 2,809Questions: 85Answers: 406

  July 2017 edited July 2017

  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 Posts: 45Questions: 21Answers: 0

  July 2017

  $('#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 Posts: 730Questions: 0Answers: 119

  July 2017

  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 Posts: 2,809Questions: 85Answers: 406

  July 2017

  @bindrid, many thanks for getting back with this!
  Roland
• vjsam Posts: 10Questions: 2Answers: 0

  December 2017 edited December 2017

  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 Posts: 61,821Questions: 1Answers: 10,127 Site admin

  December 2017

  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 Posts: 10Questions: 2Answers: 0

  December 2017

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