javascriptjquerytooltipster

How to pass an id to a file


When I hover the 'homepage_game'-div I want to pass an id ('data-gameid') to a file called game_get_info.php.

Please how can I accomplish this via Javascript or jQuery? TIA

This is the php-code:

<?php echo '
<div class="homepage_game home_tooltip" data-gameid="'.$game_cat_content['id'].'">
<div class="home_game_image">
    <a href="'.$game_cat_content['url'].'">
        <img class="home_thumb" src="'.$game_cat_content['image_url'].'" height="85" width="125" alt="'.$game_cat_content['name'].'"/>
    </a>
</div>
</div>';
?>

This is the JS/jQuery-code:

<script type="text/javascript">
$(document).ready(function() {
$('.tooltipstered').tooltipster('destroy');
$('.home_tooltip').tooltipster({
    trigger: 'hover',
    animation: 'fade',
    animationDuration: 250,
    delay: 1000,
    onlyOne: true,
    position: 'top',
    contentAsHTML: true,
    interactive: true,
    theme: ['tooltipster-noir', 'tooltipster-noir-customized'],

    content: 'Loading...',

    functionBefore: function(instance, helper) {

        var $origin = $(helper.origin);

        if ($origin.data('loaded') !== true) {

            $.post('<?php echo $setting['template_url']; ?>/sections/ajax/game_get_info.php, function(data) {

                instance.content(data);

            });
        }
    }
});
});
</script>

Solution

  • Try this:

    <script type="text/javascript">
    $(document).ready(function() {
    $('.tooltipstered').tooltipster('destroy');
    $('.home_tooltip').tooltipster({
        trigger: 'hover',
        animation: 'fade',
        animationDuration: 250,
        delay: 1000,
        onlyOne: true,
        position: 'top',
        contentAsHTML: true,
        interactive: true,
        theme: ['tooltipster-noir', 'tooltipster-noir-customized'],
    
        content: 'Loading...',
    
        functionBefore: function(instance, helper) {
    
            var $origin = $(helper.origin);
    
            if ($origin.data('loaded') !== true) {
    
                var itemId = $origin.attr('data-gameid');
    
                jQuery.ajax({
                              type: "POST",
                              url: "<?php echo $setting['template_url']; ?>/sections/ajax/game_get_info.php",
                              data: { 
                                itemId: itemId
                              },
    
                         beforeSend: function(){    
    
                              },
    
                         success: function(data){
    
                            instance.content(data);
    
                         }
    
                     });
    
            }
        }
    });
    });
    </script>