Jump to content

Page Preview for link-hover


Recommended Posts


I am currently building a website. I would like to have a page preview for the internal links. But I have no idea how that works.

I imagine that as the page preview of Wikipedia. If you move the mouse over a link, the image and the first words of the site are displayed in a tooltip.

Here is a link https://www.mediawiki.org/wiki/Page_Previews

Does anyone have an idea how to realize this? Have googled a lot and found nothing.

Many Thanks

Link to comment
Share on other sites

It doesn't seem that difficult, but if you're expecting a ready-made thing that you just drop in and it works, you're probably not going to find that.

The major pieces are a short blob of text, and an optional image, with a popup element to show them.  That's the basics of it.  How you get that text and that image is something that you can probably think about.  Maybe one option is to send an ajax request for that other page (which will only work for pages on the same domain, as in Wikipedia), and find the preview text and optional image somewhere in the HTML, like the metadata in the head.  Another option would be to build those anchor tags so that they use data attributes to include the text and image right in the link itself.  There are probably other options you could come up with too.  Maybe you have a database that has the text and image for every page on your site, for example.

I haven't looked in-depth into how Wikipedia does it to know which solution they decided on.  Since sometimes there is a delay, it sounds like they probably send an ajax request to the URL.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...