Question

I have a global javascript function which .appends() a tooltip element to any element with the data-tooltip attribute.

This is all cool until I try to give an anchor the data-tooltip attribute, which seems to break the css because I cannot seem to remove the text-decoration rule on the tooltip.

How do I remove text-decoration on the child of an anchor?

The underline is clearly being inherited from the parent anchor, as it has the default anchor colour underline, but the color of the tooltip text is orange.

See http://img.ly/35kc for a clearer idea of what I am talking about.

Update

Here is my css for the tooltip, as requested

/*TOOLTIPS*/

.tooltip_placeholder {
    position: relative;
    width: 0px;
    height: 0px;
    white-space:nowrap;
    display: inline;
    z-index: 100;
    text-decoration: none;
}

.tooltip_boundary {
    position: absolute;
    width: 300px;
    z-index: 100;
    text-decoration: none;
}

.tooltip_border {
    z-index: 100;
    background: url(/sales/global/images/tooltip_arrow.png) no-repeat;
    padding-left: 35px; /*left offset*/
    background-position: 16px 0px;
    float: left;
    z-index: 100;
    text-decoration: none;
}

.tooltip {
    padding: 8px;
    color: #A97D35;
    background: #FBF98E;
    -moz-border-radius: 0px 8px 8px 8px;
    border-radius: 0px 8px 8px 8px;
    border: 6px solid #F9E98E;
    font-size: 12px;
    text-transform: none;
    z-index: 100;
    text-decoration: none;
}

This is how a tooltip is put in:

$(element).append('<div class="tooltip_placeholder"><div class="tooltip_boundary"><div class="tooltip_border" style="display: none;"><div class="tooltip">'+$(element).attr('data-tooltip')+'</div></div></div></div>')

Update 2

@Guffa has kindly fiddled this http://jsfiddle.net/TxRmk/
The issue appears to be browser specific, as I can get it to work in FF, not Safari or Chrome. Haven’t checked IE, but it probably does something completely different

Answer 1

http://jsfiddle.net/CHSmV/

I couldnt get it to work without modifying your HTML. If you are able to do that, see my fiddle. I added an extra span around the non-tooltip text and added classes to both spans. Then I targeted the relevant spans with the proper text-decoration.

This worked in FF 3.6, IE 7+8, Safari 5 and Chrome 9.