1

I have an issue using the Tooltipster with the jQuery datatable. The tooltip only works on the first page and doesn't work on the subsequent pages.

UPDATE: My js is

$('#tblCurrentEnrollments')
        .on('order.dt', function () {
            $('.demo-interact.tooltipstered').tooltipster('destroy');
            setTimeout(SetToolTipster, 500);
        })
        .on('search.dt', function () {
            $('.demo-interact.tooltipstered').tooltipster('destroy');
            setTimeout(SetToolTipster, 500);
        })
        .on('page.dt', function () {
            $('.demo-interact.tooltipstered').tooltipster('destroy');
            setTimeout(SetToolTipster, 500);
        })
        .on('length.dt', function () {
            $('.demo-interact.tooltipstered').tooltipster('destroy');
            setTimeout(SetToolTipster, 500);
        })

        .dataTable({
            "bAutoWidth": false, // Disable the auto width calculation
            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
            "aaData": currentEnrollments,
            "aoColumns": [
                {
                    "mData": getToolTip,
                    "sWidth": "30%"
                },
                {
                    "mDataProp": "_Class.class_title",
                    "sWidth": "30%"
                },
                {
                    "mDataProp": "EnrollmentResults.enrollment_results_title",
                    "sWidth": "20%"
                },
                {
                    "mDataProp": "ecommerce_time",
                    "sWidth": "20%"
                }
            ]
        });

function getToolTip(data, type, dataToSet) {
var link = "www.google.com";
var tipDesc = '';

tipDesc = data.Course.course_description;
tipDesc += "<p><a href='" + link + "' target= '_blank'>Click this link</a></p>";
tipDesc += "<p><img src='images/lion.jpg' /></p>"

return '<div class="demo-interact" title="' + tipDesc + '">' + data.Course.course_title + '</div>';
}

The code above is working. I would like to know if this could be shortened or made any more cleaner that what it is right now.

Thanks.

2
  • Where you apply the tooltipster?
    – Victor
    Nov 5, 2014 at 16:51
  • The tooltip requires a div tag with the class demo-interact. If you see the code above I have used mRender and wrapped the contents of that cell in a div tag with that class.
    – JohnnyCage
    Nov 6, 2014 at 14:55

4 Answers 4

1

Try this:

$("#tblCurrentEnrollments").DataTable({
        "pageLength": 25,
        "fnDrawCallback": function(){
           // initialize tooltipster here
      }
    });
0

If you're using dataTable pagination with Tooltipster and your tooltips aren't available in the DOM at the point in which $.fn.tooltipster() is called your subsequent un-initialised tooltips on other dataTable "pages" are not going to work.

Since you've not included the code for Tooltipster here I'm going to make a few assumptions, but an idea would be to call your Tooltipster init function e.g. something like $('.tooltip').tooltipster(), for each of the dataTable "page" next and previous clicks, and not just in your $(document).ready() (yet another assumption).

Update: (following your updated comment)

In that case, you'll need to utilise a DataTable parameter called fnCreatedCell. This will allow you to modify the DOM element after mRender has made it available, this amended segment of your original DataTable configuration should do the job:

"aoColumns": [{
    "mDataProp": "Course.course_title",
    "sWidth": "30%",
    "mRender": function (data, type, full) {
            // alert(currentEnrollments.length());
            tipDesc = "Test"; //data.course_description;
            tipDesc += "<p><a href='" + link + "' target= '_blank'>Click this link</a></p>";
            tipDesc += "<p><img src='images/lion.jpg' /></p>"

            return '<div class="demo-interact" title="' + tipDesc + '">' + data + '</div>';
        }
    },
    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
        $(".demo-interact", nTd).tooltipster({
            // Your Tooltipster config. here
        });
    },
    {
        "mDataProp": "_Class.class_title",
        "sWidth": "30%"
    },
    {
        "mDataProp": "EnrollmentResults.enrollment_results_title",
        "sWidth": "20%"
    },
    {
        "mDataProp": "ecommerce_time",
        "sWidth": "20%"
    }
]

I hope this helps :)

3
  • The tooltip requires a div tag with the class demo-interact. If you see the code above I have used mRender and wrapped the contents of that cell in a div tag with that class.
    – JohnnyCage
    Nov 6, 2014 at 14:54
  • @DevilsGrave Thanks, I've updated my answer to reflect your updated comment :)
    – zesda
    Nov 6, 2014 at 15:08
  • I updated my original question with the code that I am using now. Please take a look and let me know if any changes are required to it. It is working now but if the code can be shortened or made more cleaner then I would like to know. Thanks.
    – JohnnyCage
    Nov 6, 2014 at 17:36
0

Use livequery:

$('.demo-interact').livequery(function () {
     $(this).tooltipster()
 })

Livequery will apply the tooltipster in all elements with demo-interact class, even if an element is added dynamically.

4
  • Why use another library to achieve what can be accomplished with what libraries OP's currently using?
    – zesda
    Nov 6, 2014 at 15:13
  • @zesda Livequery is just one option to solve the problem. When you work with this kind of library (datatables), that generates html dynamically, you are liable to have this kind of problem. Why apply again the tooltipster if it has already been applied?
    – Victor
    Nov 6, 2014 at 15:23
  • Not to question your solution or to force OPs decision on the right answer. But, DataTables provides options by default to solve this exact issue. I don't know about the capability of livequery per se, but, in my eyes a simple modification to a configuration which needs to be passed regardless over the inclusion of an additional library is always a better approach.
    – zesda
    Nov 6, 2014 at 15:33
  • I like to use the livequery plugin because it makes you code cleaner, but is a personal opnion. And i agree with you, the inclusion of some libraries should be avoided if it isn't necessary
    – Victor
    Nov 6, 2014 at 15:50
0

I had the same problem . That happens because you dont event listener another spread in the pages . I solved with this.

function myFunction(){
     $('yourSelector').on('yourvent',function () {

     });

     $('yourSelector').off('yourvent',function () {

     });
}

You will bind you event for anothers pages with this example.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.