How would you put a tooltip on mutiple buttons within a cell

mrandall101

How would you put a tooltip on mutiple buttons within a cell where the buttons are being generated server-side. I tried to put the tooltip on the server-side with no luck, because of the problem that server-side takes away functionality of the tooltip.

kthorngren

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

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

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

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

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

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

<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

$('.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

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.