Faizal
Faizal

Reputation: 21

qtip2 tooltip is not working after pagination (Jquery Datatables)

Initialising the dataTables:

$('#example').dataTable({ data: data, columns: columns });

After initialising dataTables im setting the tooltip:

$(".showInfo").qtip({                   
                    content: {text: function(event, api) {                            
                                $.get( "url", function(result) {                                                                   
                                    var content = 'Name :' + result.Name + '</br>';
                                        content += 'Phone :' + result.Phone+ '</br>';
                                        content += 'Phone :' + result.Email+ '</br>';                                        
                                    api.set('content.text', content);
                                }), function(xhr, status, error) {
                                    api.set('content.text', status + ': ' + error);
                                };
                                return 'Loading...' 
                                }
                            }
                });

above code works fine for 1st page of dataTable. But when I do paginating the "qtip" functionality is not working. Please help me.

Upvotes: 0

Views: 686

Answers (1)

Faizal
Faizal

Reputation: 21

I got it :)

$('#example').on('mouseenter', '.showInfo', function(event) {

                            $.get("URL", function(result) {
                                $(this).qtip({
                                    overwrite: false,
                                    content: function() {

                                        var content = 'Name :' + result.Name + '</br>';
                                        content += 'Phone :' + result.Phone + '</br>';
                                        content += 'Phone :' + result.Email + '</br>';
                                        return content;
                                    },
                                    show: {
                                        event: event.type,
                                        ready: true
                                    },
                                    hide: {
                                        fixed: true
                                    }
                                }, event); 
                            }, 'json');
                        });

Upvotes: 2

Related Questions