Question

Links issues...

Hi. I’m no programmer but I work with one website. It’s on WordPress and I’m satisfied with almost everything except for one minor detail. It’s the filenames which pop up every time you move the cursor over images. I understand that this is not so important, but it bothers me as a perfectionist. Also, some image names are quite long. Can anyone tell me how to get rid of this and is it even possible? Here’s the screenshot

The page I need help with: https://primesound.org/


Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

Thanks, Matt.

This perfectly worked for my site.

I was trying it for the past few hours and just can’t able to get it done. Finally, I did it with your help. Thanks again.

Hi there @welcome423e5fbf39746d111f4,

What you are seeing there is the browser showing the title attribute that is set on the images when you hover over them for a certain period of time (decided by the browser, not something you can control).

Example screenshot of the title attribute

It is generally discouraged to remove titles from images, as they are important for the accessibility of a site when a user with a screen reader visits your site. You can, however, change what these titles are by changing the filenames of the images to something more descriptive of what the image is.

If this isn’t possible due to how your Wordpress is set up, you could add the following Javascript to your page which will replace the titles of the images with the alt text, which you appear to have already set to something more descriptive:

document.addEventListener("DOMContentLoaded", function() {  // Run when the page has loaded
    var elms = document.querySelectorAll("img[title]");  // Find all images with a title
    for (var i = 0; i < elms.length; i++) {
        if (elms[i].hasAttribute("alt")) {
            elms[i].setAttribute("title", elms[i].getAttribute("alt"));  // Set title to alt if the image has an alt attribute
        } else {
           elms[i].removeAttribute("title");  // Else, remove the title so you don't see the filename
        }
    }
});

If you do decide you’d rather simply remove the titles on the images completely, you can do so by having the following Javascript on your pages:

document.addEventListener("DOMContentLoaded", function() {  // Run when the page has loaded
    var elms = document.querySelectorAll("img[title]");  // Find all images with a title
    for (var i = 0; i < elms.length; i++) {
        elms[i].removeAttribute("title");  // Remove the title so you don't see the filename
    }
});

Hope that helps with your issue! Let me know if you need anything further.

- Matt.