如何从WordPress中的函数获取data属性的值并将其放在jquery中的变量中？

Question

I have a WordPress function that overrides a native WordPress Gallery. I added the tooltipster.js on that function, but I want to get the value of the data-image attribute to get the url and then put it in the tooltipster initialization.

With my code, the tooltip works, but it is not getting the image url.

I have a WordPress code that is inside functions.php like this:

<li> <a class="tooltip" data-image="<?php echo $attachment_img_url; ?>"> <?php echo wp_get_attachment_image( $attachment->ID, 'thumbnail' ); ?></a> </li>

and the tooltipster initialization that's inside footer.php:

$(document).ready(function() {
     var imgUrl = $(this).data('image');

     $('.tooltip').tooltipster({
       content: $('<span><img src="' + imgUrl + '" /></span>')
        });
});

Answer 1

According to the tooltipster documentation you can use the method functionBefore to run a function before the tooltip displays. The first parameter of this function is origin or the element that was hovered over to open the tooltip. Knowing this you can use origin.data('image') to get the data of data-image and set it to the content of tooltip with origin.tooltipster('content', origin.data('image')); .

$('.tooltip').tooltipster({
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();
        origin.tooltipster('content', origin.data('image'));
    }
});

DEMO