Turn Off Alt Tags On Links With CSS?

Question

This website that I\'m working on has annoying alt tags popping up when you hover over links in the sidebar. I didn\'t put these alt tags in. But, I can control the CSS... I

Answer 1

Simple answer: no

They are impossible to turn off just with CSS. They are browser dependant and are not part of any CSS spec i.e. you can't style them, hide them, anything.

Though you can get rid of them by Javascript:

Javascript

var elements = document.getElementsByTagName('a');

for (var i = 0, len = elements.length; i < len; i++)
{
  elements[i].removeAttribute('title');
}

Answer 2

Dear stackoverflow members, I wanted to remove the img alt attribute, to remove the alt thing, with css, without changing html php, or adding java elements.
I wanted simply this box (border) around the image that is appearring to be removed. I could not find anywhere this simple solution! So i post it here! I hoep will help someone! I include a screenshot.

I made height and width to be exact with the picture, no more, no less. Also, check that font-size attribute element was set to 0.

That is (dependign on other set attributes, you may also need to adjust them, in order this "box" be adjusted to the exact size of your image:

#your_specific_ID_name .image_myclass_image {
   background-position: 0px 0px;
   height: 'the height of your image';
   width: 'the width of your image';
   font-size: 0;
}

Answer 3

From what I can see of the site, you’re getting a tooltip when you hover over the side bar links because they each have a title attribute.

I don’t think there’s anything in CSS to prevent these showing up. Showing these in a tooltip on hover is a decision the browser makes, separately to the rendering of the HTML.

The best you can do is use JavaScript to remove the title attribute.

Answer 4

You can use CSS to hide images with any alt text, for example alt = "LinkedIn"

[alt="LinkedIn"] { display: none !important; }

You can also hide the image with title for example title = "Company logo"

[title="Company logo"] { display: none !important; }

Answer 5

They're actually title tags and you can't remove them with css (you can with javascript) but I guess they're there for a reason.

Answer 6

You can use CSS like below:

    pointer-events: none;