How to Disable alt, title, and aria-label tooltips for all websites?

[shaneb]

Is there a way to disable all alt text, title attribute, and aria-label attribute text from popping up as tooltips? The text that pops up when you hover over image (and other) elements?

I understand why it is important for screen readers, however I am not visually impaired (to that degree, at least). I run into the issue of them becoming annoying on a number of sites, however most recently it has been annoying on Twitch, and specifically the Twitch chat where there are reply buttons and other UI elements that make use of them but which end up blocking access to other buttons if you hover at the wrong angle or for a few milliseconds too long. It would be nice to have a feature, even just as a buried flag we can activate to disable these tooltips entirely.

Alternatively does anyone know of a reliable UserCSS, UserJS, or Extension to add this feature? I already have 20 active extensions so I would prefer to not have to add another, but whatever it takes to fix this annoying UI element I run into on a daily basis. It is exceedingly rare that I ever need to use them in my daily browsing activities.

[DoctorG]

@shaneb On which objects you do not want to have tooltips?

[DoctorG]

JS:

const tooltipElements = document.querySelectorAll('[title]');
const altElements = document.querySelectorAll('[alt]');
const labelElements = document.querySelectorAll('[aria-label]');

tooltipElements.forEach(element => {
	element.addEventListener('mouseover', function () {
		this.removeAttribute('title');
	});
});

altElements.forEach(element => {
	element.addEventListener('mouseover', function () {
		this.removeAttribute('alt');
	});
});
labelElements.forEach(element => {
	element.addEventListener('mouseover', function () {
		this.removeAttribute('aria-label');
	});
});

@shaneb When web pages display alt and aria-label attributes, that is a wrong used HTML markup and bad website design. And title attributes can cause nasty disturbing tooltips when not needed.

[DoctorG]

@shaneb Do you know how to use this UserJS for all web sites or do you want only hide tooltips for some?

[DoctorG]

The UserJS:

// ==UserScript==
// @name            remove-tooltips
// @description     Remove tooltips on some website elements
// @author          GwenDragon
// @version         0.0.1
// @license         Free use, but only with intact copyright headers
// @include         */*
// ==/UserScript==

(function remove_tooltips() {
    const tooltipElements = document.querySelectorAll('[title]');
    const altElements = document.querySelectorAll('[alt]');
    const labelElements = document.querySelectorAll('[aria-label]');
    
    tooltipElements.forEach(element => {
        element.addEventListener('mouseover', function () {
		this.removeAttribute('title');
        });
    });

    altElements.forEach(element => {
	element.addEventListener('mouseover', function () {
		this.removeAttribute('alt');
	});
    });

    labelElements.forEach(element => {
	element.addEventListener('mouseover', function () {
		this.removeAttribute('aria-label');
	});
    });
   
})();

---

The // @include */* tells the UserJS to remove tooltips on all websites.
Manual @include

If you need to remove only on some sites, delete line with the @include and use f.ex. for Twitch these:
// @match https://*.twitch.tv/*
// @match https://twitch.tv/*
// @match http://twitch.tv/*
// @match http://*.twitch.tv/*
Manual @match

Add more @match for other sites.