CSS Tooltip and <acronym> tag

css-tooltip.css

abbr {
    position: relative;
    cursor: pointer;
}

abbr:hover::after {
    content: attr(title);
    position: absolute;
    white-space: nowrap;
    background-color: #666;
    padding: 3px 7px;
    color: #fff;
    border-radius: 3px;
    left: 0;
    top: 27px;
}

tooltip.html

<p>
    Rural development is a key thing for acheiving <abbr title="Gross Domestic Product">GDP</abbr>. Where there <abbr title="Bangladesh Agricultural and Rural Development">BARD</abbr> is an institution dedicated to this particular achievement.
</p>