如何在wordpress的分页悬停事件中显示其他页面的帖子标题（仅作为工具提示）？

Question

I am working on a project in Wordpress. I have a blog with number of pages with a pagination at bottom like 1, 2, 3 and so on. I need to implement a functionality on hover event of a page number which show a tooltip having post's header (as a list) of that page like shown in below screenshot:

My blog pages links are like :

www.domain.com/page/1/ 
www.domain.com/page/2/ 
www.domain.com/page/3/
...

I am a front-end developer and have a little knowledge in php. I searched on google with no luck. Can anyone help how can I achieve this?

Thanks!

Edited:

Can I achieve it by sending ajax requests. You might try here

Answer 1

let's assume that the navigation looks like this.

<div class="navigation">
    <ul>
        <li><a href="http://example.com/1" >Previous Page</a></li>
        <li><a href="http://example.com/">1</a></li>
        <li class="active"><a href="http://example.com/page/2/">2</a></li>
        <li><a href="http://example.com/page/3/">3</a></li>
        <li><a href="http://example.com/page/3/" >Next Page</a></li>
    </ul>
</div>

and that the post headers look like this

<div class="post-header">
    <h2><a href="http://example.com/post-link/">Post Title</a></h2>
    <!-- some meta stuff goes here -->
</div>

alright, now that that's over here's the ajax bit

jQuery( function($){

    $("div.navigation a").mouseover(function(){ 
        // we'll need this for later use
        var thisTag = $(this);
        // no point in making another request if we already have the data
        if( $(this).data('hovered') ) {
            // this is where you'll trigger the saved tooltips
            console.log( thisTag.data('titles') );
            return;
        }
        // we'll add a flag to check whether we've already checked this link (in retrospect 'checked' would've been a better choice)
        $(this).data('hovered', true);
        // we don't have to do this but it looks cleaner
        var ajaxurl = $(this).attr('href');
        // pretty straight forward, we grab everything in the linked page (exactly what those infinite scroll plugins/themes do) and find the titles.
        $.ajax({
            url: ajaxurl,
            type: 'get',
            success: function(data) {
                var titles = [];
                // you'll have to modify the selector to match your theme
                $(data).find('.post-header h2 a').each( function(){
                    titles.push( $(this).text() );
                });                                
                // I'm doing this so that this can be retrived on subsequent hovers. however, this part should be replaced with the tooltip
                thisTag.data('titles', titles);
                console.log( titles );
            }
        });
    });

});

you'll have to adjust the selectors to match your theme and that's it.