Mickey Patel Mickey Patel - 6 months ago 22
jQuery Question

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

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

how to remove default title.

<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 adv.

Answer

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:

how to remove default title.

Probably not possible.


Alternative solution

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>

Comments