After customizing css for tooltip, it is showing twice

Question

After customizing the CSS for tooltip msg, it showing twice in the screen. Below is the kind of implementation provided.

<a href="#" title="This is some information for our tooltip." class="tooltip">
    <span title="More">CSS3 Tooltip</span>
</a>

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    top: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

.tooltip:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 0 6px 6px 6px;
    top: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

Sample Output:

Help me to find the cause of this and how can we suppress the 2nd tooltip msg

jsfiddle (sample view)

Answer 1

You're using CSS only "extends" the functionality for the title, but the original title attribute is still getting rendered.

You might wanna change it to data-title which isn't rendered by the browser by default, and change the CSS to content: attr(data-title) to use that instead.

Also, remove the inner span's title, it's redundant and unecessary.

Example

Answer 2

Use data-title attribute instead of title.

<a href="#" data-title="This is some information for our tooltip." class="tooltip"><span title="More">CSS3 Tooltip</span></a>

And, extract content of this attribute in your css.

content: attr(data-title);

EDIT:

If you have no control over the title attribute, you could remove them during runtime using JavaScript.

var tooltipElements = Array.prototype.slice.call(document.querySelectorAll('.tooltip'));

tooltipElements.forEach(replaceTitleWithDataTitle);

function replaceTitleWithDataTitle(element) {
    var title = element.getAttribute('title');

    element.removeAttribute('title');
    element.setAttribute('data-title', title || '');
}