Not Disaply window tooltip in a href

Question

I have created this tooltip fiddle link

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


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

        .tooltip:hover:after{
            background: #333;
            background: rgba(0,0,0,.8);
            border-radius: 5px;
            bottom: 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: 6px 6px 0 6px;
            bottom: 20px;
            content: "";
            left: 50%;
            position: absolute;
            z-index: 99;
        }

but along with the tooltip it displays a second small grey window with the same text. How can I get rid of the second window?

thanks

Answer 1

Don't use title because title by default shows the yellow tooltip. Use html5 data attaribute instead.

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



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