Answers

• kthorngren Posts: 21,242Questions: 26Answers: 4,929

  November 2018 edited November 2018

  You can either use columns.defaultContent or columns.render to build you buttons. You can add a title to the button.

  defaultContent: '<button title="my tooltip">My Button</button>'

  Kevin
• mrandall101 Posts: 6Questions: 1Answers: 0

  November 2018

  Thanks for your answer... buttons are generated on server-side because of access related to user roles... and there are 3 buttons within one cell with first one requiring a tooltip....
• colin Posts: 15,238Questions: 1Answers: 2,599

  November 2018

  Hi @mrandall101 ,

  You could also use createdRow to modify that cell with those three buttons when the row is first created. You would need to delve into the TD element and add that title attribute to the specific button.

  We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• mrandall101 Posts: 6Questions: 1Answers: 0

  November 2018

  Thanks for the help. It would be great if I could send a test case, but because its sensitive information I will not be able to. Thank you so much for the offer and the help.
• mrandall101 Posts: 6Questions: 1Answers: 0

  November 2018

  Another question, you said when those buttons are created. The buttons are created on the server-side. Will that still work if created on the server-side or would have to modify cell on the client-side. What I'm not seeing is how to modify or getting the correct button within that cell.
• kthorngren Posts: 21,242Questions: 26Answers: 4,929

  November 2018

  Without seeing what your button data looks like its hard to help. Maybe you can use this test case as a starter to replicate your issue. Start by updating the data with hwo your button looks in the JSON data from the server.

  http://live.datatables.net/ledahije/1/edit

  The tooltip in the button in the test case data does work.

  Kevin
• mrandall101 Posts: 6Questions: 1Answers: 0

  November 2018

  <a href="http://<url/<system>/<method>/11111" class="btn-link icon-lg icon-link toolTip" data-tooltip="tooltip" data-placement="bottom" title="Download"><svg class="icon icon-green align-middle toolTip"><use xlink:href="#icon-download"></use></svg><svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="icon-download" viewBox="0 0 32 32"><path d="M16 0.613q3.12 0 5.973 1.213t4.92 3.28 3.28 4.92 1.213 5.973-1.213 5.973-3.28 4.92-4.92 3.28-5.973 1.213-5.973-1.213-4.92-3.28-3.28-4.92-1.213-5.973 1.213-5.973 3.28-4.92 4.92-3.28 5.973-1.213zM16 4.613q-3.093 0-5.72 1.52t-4.147 4.147-1.52 5.72 1.52 5.72 4.147 4.147 5.72 1.52 5.72-1.52 4.147-4.147 1.52-5.72-1.52-5.72-4.147-4.147-5.72-1.52zM14 8h4q0.267 0 0.467 0.2t0.2 0.467v7.333h3.653q0.56 0 0.693 0.307t-0.213 0.733l-5.947 7.333q-0.347 0.427-0.853 0.427t-0.853-0.427l-5.947-7.333q-0.347-0.427-0.213-0.733t0.693-0.307h3.653v-7.333q0-0.267 0.2-0.467t0.467-0.2z"></path></symbol></defs></svg></a><a href="http://<url/<system>/<method>/11111" class="btn-link icon-lg icon-link toolTip" data-tooltip="tooltip" data-placement="bottom" title="Download"><svg class="icon icon-green align-middle toolTip"><use xlink:href="#icon-download"></use></svg><svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="icon-download" viewBox="0 0 32 32"><path d="M16 0.613q3.12 0 5.973 1.213t4.92 3.28 3.28 4.92 1.213 5.973-1.213 5.973-3.28 4.92-4.92 3.28-5.973 1.213-5.973-1.213-4.92-3.28-3.28-4.92-1.213-5.973 1.213-5.973 3.28-4.92 4.92-3.28 5.973-1.213zM16 4.613q-3.093 0-5.72 1.52t-4.147 4.147-1.52 5.72 1.52 5.72 4.147 4.147 5.72 1.52 5.72-1.52 4.147-4.147 1.52-5.72-1.52-5.72-4.147-4.147-5.72-1.52zM14 8h4q0.267 0 0.467 0.2t0.2 0.467v7.333h3.653q0.56 0 0.693 0.307t-0.213 0.733l-5.947 7.333q-0.347 0.427-0.853 0.427t-0.853-0.427l-5.947-7.333q-0.347-0.427-0.213-0.733t0.693-0.307h3.653v-7.333q0-0.267 0.2-0.467t0.467-0.2z"></path></symbol></defs></svg></a><a href="http://<url/<system>/<method>/11111" class="btn-link icon-lg icon-link toolTip" data-tooltip="tooltip" data-placement="bottom" title="Download"><svg class="icon icon-green align-middle toolTip"><use xlink:href="#icon-download"></use></svg><svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="icon-download" viewBox="0 0 32 32"><path d="M16 0.613q3.12 0 5.973 1.213t4.92 3.28 3.28 4.92 1.213 5.973-1.213 5.973-3.28 4.92-4.92 3.28-5.973 1.213-5.973-1.213-4.92-3.28-3.28-4.92-1.213-5.973 1.213-5.973 3.28-4.92 4.92-3.28 5.973-1.213zM16 4.613q-3.093 0-5.72 1.52t-4.147 4.147-1.52 5.72 1.52 5.72 4.147 4.147 5.72 1.52 5.72-1.52 4.147-4.147 1.52-5.72-1.52-5.72-4.147-4.147-5.72-1.52zM14 8h4q0.267 0 0.467 0.2t0.2 0.467v7.333h3.653q0.56 0 0.693 0.307t-0.213 0.733l-5.947 7.333q-0.347 0.427-0.853 0.427t-0.853-0.427l-5.947-7.333q-0.347-0.427-0.213-0.733t0.693-0.307h3.653v-7.333q0-0.267 0.2-0.467t0.467-0.2z"></path></symbol></defs></svg></a>

  $('.toolTip').qtip({
  content: {
  text: function(event, api) {
  var id = $(this).closest('tr').find("#id").val();

                      $.ajax({
                          url: '@Url.Action("<app>","<Method>")',
                          cache: false,
                          data: {documentId : id}
                      }).then(function(content) {
                          // Return the content
                          api.set('content.text', content);
                      });
                  }
              },
              style: {
                  classes: 'qtip-bootstrap'
              },
              position: {
                  my: 'top left',
                  at: 'bottom left',
                  target: '.toolTip',
                  container: $('div .container-fluid'),
                  adjust: {
                      resize: true
                  }
              }
          });
  

  There it is the 3 buttons within a cell then I need to fire the $(.toolTip) on the client-side to show tooltip information.
• kthorngren Posts: 21,242Questions: 26Answers: 4,929

  November 2018 edited November 2018

  $('.toolTip').qtip({

  I suspect the problem is that this is executed before the buttons are displayed. Likely you are running into the issue discussed in the My events don't work on the second page FAQ. If this is the case then you will want to use jQuery Delegated Events

  Kevin
• mrandall101 Posts: 6Questions: 1Answers: 0

  November 2018

  Okay thank you so much for sharing your knowledge. I will look at jQuery Delegated Events and I will see if I can implement it. Thanks so much again.