Remove the old design title of an anchor tag after applying CSS on it

Question

I am able to change design of the title attribute inside anchor tag, even though the default one is coming along with changed one.

I'm wondering if it's possible to remove default title tooltip as shown below?

---

Here's my code so far:

<a title="Edit"><img alt="" src="dist/img/edit.png" ></a>

a:hover {
    color: red;
    position: relative;
}

a[title]:hover:after {
    content: attr(title);
    padding: 2px 4px;
    color: #333;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear, left top, left bottom,
                      color-stop(0, #eeeeee), color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Thanks in advance.

Answer 1

I don't think there is a simple way to do what you want, while still using the title attribute. So the answer to your original question:

Is it possible to remove default title tooltip?

Answer: Probably not possible. Each browser decides how to handle the title attribute. So unless there is some hacky way of disabling the default behavior for each browser, there is probably no way of achieving this.

Edit: Apparently this isn't possible in Chrome, but is possible in Firefox.

---

Alternative solution

Unless you absolutely must use the title attribute specifically, the easiest and simplest solution would probably be to just use another tag instead of title, for example data-title. That way, you're not triggering the default behavior while still achieving your default styles.

a:hover {
    color: red;
    position: relative;
}

a[data-title]:hover:after {
    content: attr(data-title);
    padding: 2px 4px;
    color: #333;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear, left top, left bottom,
                      color-stop(0, #eeeeee), color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

<a data-title="Edit"><img alt="" src="dist/img/edit.png" ></a>