Using a custom hovercard in datatables

XmLmX2

Hello. I've created a hovercard script using jQuery that works perfectly fine in a normal table. But it won't work in a datatable and I don't know why.

Here's the code:

$('.has-hovercard').hover(
        function(e){
            clearTimeout($('.hovercard').data('timeoutId'));
            //width = $('.has-hovercard').width();
            element = $(".hovercard");
            position = $(this).offset();
            var id = $(this).attr('data-id');

            $.ajax({
                url: 'ajax/profile.php?u='+id,
                beforeSend: function(){
                   $('#hovercard-content').html('<div class="hovercard-wrapper"><div class="loader"><img src="img/ajax-loader.gif"></div></div>');
               },
               success: function(html){
                   $('#hovercard-content').html(html);
               }
            });


            $('.hovercard').show().css(position);
            var hcDetails = element.find('.hovercard').eq(0);
            var hcPreviewRect = element[0].getBoundingClientRect();

            var hcdTop = hcPreviewRect.top - 20; //Subtracting 20px of padding;
            var hcdRight = hcPreviewRect.left + 35 + hcDetails.width(); //Adding 35px of padding;
            var hcdBottom = hcPreviewRect.top + 35 + hcDetails.height() + element.height(); //Adding 35px of padding;
            var hcdLeft = hcPreviewRect.top - 10; //Subtracting 10px of padding;

            //Check for forced open directions, or if need to be autoadjusted
            if (hcdRight > window.innerWidth) {
                console.log("Nu are loc in dreapta");
            } else if(hcdBottom > window.innerHeight) {
                console.log("Nu are loc in jos");
                position.top = position.top - 25 - element.height();
                position.left = position.left;
                $( "#hovercard-content" ).removeClass().addClass( "show-on-top" );
            } else {
                position.top = position.top + 15;
                position.left = position.left;
                $( "#hovercard-content" ).removeClass().addClass( "show-on-bottom" );
            }

            $('.hovercard').show().css(position);

        },
        function(e){
            var someElement = $(this),
            timeoutId = setTimeout(function(){
            $('.hovercard').hide();
        }, 650);
        $('.hovercard').data('timeoutId', timeoutId);
    });