Get custom fields when hover link of post

Question

I have custom page and get some links of post

if( $my_query->have_posts() ) {

  while ($my_query->have_posts()) : $my_query->the_post(); ?>

    <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" target="_blank"><?php echo str_replace($xx,'',get_the_title()); ?></a></li>

    <?php

  endwhile;

}

I want to get custom fields (e.g description, post-image) of post when hover every link of post and put them into div (tooltip), do I create new file for get custom fields and get file using ajax or just call using wp_query to get custom fields?

<script type="text/javascript">
$('a[rel="bookmark"')
  .mouseenter(function() {
    //     
   })
  .mouseleave(function() {
    //
   })
}
</script>

Answer 1

I would just put the custom fields in the <li> after the <a> and then show/hide them with your preferred tooltip method, whether it be CSS, JS or a combination of the two:

<?php

if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" target="_blank"><?php echo str_replace($xx,'',get_the_title()); ?></a>
            <div>description, post-image, etc go here</div>
        </li>
    <?php
    endwhile;
}
?>