How to generate target webpage title in link mouseover text?

Question

I have a blog where I format links in a specific way, by adding mouseover/hover text with a basic description of the link in the following format: {page title} [by {author(s)} @ {publication date & time}] | {website}. Here’s a screencap with an example.

As you can imagine, manually entering that title text for every single link gets quite tiresome. I’ve been doing this for years and I’m dying for a way to automate it.

Is there a way to automatically generate a target webpage’s title, and possibly the site/domain, in link mouseover texts across an entire website? (Ideally it would be formatted as indicated above, with author(s) and posted date/time and all, but that would likely involve too much coding for me.)

Please keep in mind that I only have a moderate, self-taught grasp of HTML and CSS.

---

Update: Anik Raj below provided an answer below that’s perfect – a bit of JS to generate a mouseover tooltip with the target page’s title – but I can’t get the script to work on my Blogger blog. I first saved the code to a .js file in my Dropbox and tried linking to it using the following code (which works fine for other external JS scripts):

<!-- Link hover title preview script (source: https://stackoverflow.com/questions/49950669/how-to-generate-target-webpage-title-in-link-mouseover-text/49951153#49951153) -->
<script async='async' src='https://dl.dropboxusercontent.com/s/h6enekx0rt9auax/link_hover_previews.js' type='text/javascript'/>

… But nothing happens. And when I insert the script in the page HTML, I get the following error (screencap here) and Blogger won’t let me save the template:

Error parsing XML, line 4002, column 21: The content of elements must consist of well-formed character data or markup.

I know nothing of code, JS included, so I don’t know how to fix it. I’ve tried several online JS validation tools; some identify an error there, others don’t. It clearly works just fine in the JSFiddle Anik provided.

If anyone could fix the code so it works in Blogger, you’d be my hero.

Answer 1

Edit: this works only under the same domain as other domains have CORS disabled.

The easiest way would be to add a java script file to the html file.

This is a simple script to set the title of the link as its hover text.

<script type = "text/javascript">
//get all links on the webpage
var links = document.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {
(function(i) {
    // for every link, make a request using its href property and fetch its html
    var request = makeHttpObject();
    request.open("GET", links[i].href, true);
    request.send(null);
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            //on request received, process the html and set the title parameter
            const doc = new DOMParser().parseFromString(request.responseText, "text/html");
            const title = doc.querySelectorAll('title')[0];
            if (title) links[i].setAttribute("title", title.innerText)
        }
    };
})(i);
}

//helper function to create requests
function makeHttpObject() {
try {
    return new XMLHttpRequest();
} catch (error) {}
try {
    return new ActiveXObject("Msxml2.XMLHTTP");
} catch (error) {}
try {
    return new ActiveXObject("Microsoft.XMLHTTP");
} catch (error) {}
throw new Error("Could not create HTTP request object.");
} 
</script>

Adding this script to the end will add hover text to all links.

See this JS Fiddle example -> https://jsfiddle.net/mcdvswud/11/