Hide titles on hover

When a link or whatever element has a title attribute, and you go with your mouse on that element, you will see a tooltip that shows you the value of that title attribute.

I mean something that looks like the following picture.

This is really not a problem at all, but it looks some users don’t like that tooltip because for them it’s not nice.

I suggest don’t remove the title attributes only to don’t show the tooltip, in another case the accessibility of your website will have problems.

Rather than remove them, better you replace them with “aria-label”.

Here you have a very simple code to hide the tiles on hover without losing the accessibility of the page:

add_action( 'wp_footer',function(){
    ?>
    <script id="hide-title-attributes">
    function hide_title_attributes(){
        var t = document.querySelectorAll('[title]');
        if(t && t.length > 0){
            for(var n=0;n<t.length;++n){
               var title=t[n].title;
               t[n].removeAttribute('title');
               t[n].setAttribute('aria-label',title);
            }
        }
    }
    hide_title_attributes();
    </script>
    <?php
},999999 );

Put the code above in the functions.php of your child theme if any, or in a functional plugin. If you have no functional plugins, you can create one with Plugin Builder.

You can also download the plugin Hide titles on hover from the official WordPress repository. It’s an ultra-lightweight plugin, just activate it, no settings, no bloat.