help text in lightning component using CSS

Question

I have below line of code which will show help text when user will hover over question mark.

<div>
        <div class="helptext" onmouseover="{!c.applyCSS}">?</div>
        <div style="visibility:hidden;">Tooltip text</div>       
</div>

.THIS .helptext{
    background-color: blue;
    height: 20px;
    width: 20px;
    color: white;
    border-radius: 50%;
    text-align: center;
    padding-top: 2px;
    float:right;
}

.THIS .helptext:hover.tooltiptext{
    background-color: red;
    visibility:visible;
}

It is not working. I made this part working using lightning design.

However I want to know why this is not working.

Thanks in advance.