Turn Off Alt Tags on Links with CSS

Turn Off Alt Tags On Links With CSS?

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');
}

Get rid of alt text for html on hover

Replace this:

<style type="text/css">
  a.hovertext:after { content: attr(title); }
</style>
<a title="Sandwitch">...</a>

with this:

<style type="text/css">
  a.hovertext:after { content: attr(data-title); }
</style>
<a data-title="Sandwitch">...</a>

HTML5 data-* attributes will allow you to insert additional data into the markup without triggering the default user-agent caption.

How do I prevent alt text appearing when hovering over an image?

Okay! My bad--I'm using Mootools Slideshow2 http://code.google.com/p/slideshow/
The show defaults to having titles on, it converts alt text into titles. I simply changed titles from "true" to "false" in slideshow.js and the problem is solved. I feel a bit silly, I should have thought of that right away. Thanks for your attention everyone!

Hide Alt text when Hover

See https://developer.mozilla.org/en/DOM/window.status :

This property does not work in default configuration of Firefox and some other browsers: setting window.status has no effect on the text displayed in the status bar. To allow scripts change the the status bar text, the user must set the dom.disable_window_status_change preference to false in the about:config screen.

This is a security feature that you can't realistically bypass.

How to prevent a link's alt text from disappearing

Unfortunately this is controlled by the browser and can't be changed. You could look at using something like the jQuery Tooltip Plugin instead, or jQuery Tools which has a nice example of imitating browsers default tooltip.

Remove ALT title tag when no access to html

Here is a possible solution, using document.createTreeWalker, for removing an attribute from a selected element and all of it's child elements.

HTML

<div id="removeHere" title="titled 0">
    <div title="titled 1">some text 1</div>
    <div title="titled 2">some text 2
        <div title="titled 3">some text 3
            <div title="titled 4">some text 4</div>
        </div>
    </div>
    <div title="titled 5">some text 5</div>
</div>
<div title="titled 6">some text 6</div>

Javascript

(function (global) {
    function removeAttributeWalker(node, attribute) {
        var treeWalker = document.createTreeWalker(
        node,
        NodeFilter.SHOW_ELEMENT, {
            acceptNode: function () {
                return NodeFilter.FILTER_ACCEPT;
            }
        },
        false);

        node.removeAttribute(attribute);

        while (treeWalker.nextNode()) {
            treeWalker.currentNode.removeAttribute(attribute);
        }
    }

    global.addEventListener("load", function onLoad() {
        global.removeEventListener("load", onLoad);
        removeAttributeWalker(document.getElementById("removeHere"), "title");
    }, false);
}(window));

On jsfiddle

Update: If you need to support older browsers that do not have the above method, then the following could be used instead.

Javascript

(function (global) {
    function removeAttributeWalker(node, attribute) {
        if (node.nodeType === 1) {
            node.removeAttribute(attribute);
            node = node.firstChild;
            while (node) {
                removeAttributeWalker(node, attribute);
                node = node.nextSibling;
            }
        }
    }

    global.addEventListener("load", function onLoad() {
        global.removeEventListener("load", onLoad);
        removeAttributeWalker(document.getElementById("removeHere"), "title");
    }, false);
}(window));

On jsfiddle

---

Related Topics