Popup Tooltip using CSS

Firefox only

This is some text to testingThis is some text to testingLink
and some more text and some more text and some more text and somesomesomeLinkmore text and some more text and some more text text and some more text and sometext and some more text
Rotating Star and some more text Linkmore text and some more text and some more text

Red color is html code :

This is some text to testing<a class="tooltip" href="https://www.blogger.com/" title="Sample tooltip with much longer text">Link</a>and some more text and some more text and some more text and somesomesome<a class="tooltip" href="https://www.blogger.com/" title="Sample tooltip">Link</a>more text and some more text and some more text text and some more text and sometext and some more text and some more text<a class="tooltip" href="https://www.blogger.com/" target="_blank" title="Sample tooltip text"> Link</a>more text and some more text and some more text
ccs code:

.tooltip {
 display:inline;
 position:relative
}
.tooltip:hover { text-decoration:none }
.tooltip:hover:after {
 background:#111;
 background:rgba(235,0,0,.6);
 border-radius:5px;
 bottom:18px;
 color:#fff;
 content:attr(title);
 display:table;
 left:-1000px;
 right:-1000px;
 margin:auto;
 padding:5px 15px;
 position:absolute;
 white-space:nowrap;
 z-index:98;
 text-align:center;
}
.tooltip:hover:before {
 border:solid;
 border-color:#dfd transparent;
 border-width:6px 6px 0 6px;
 bottom:12px;
 content:"";
 display:block;
 left:50%;
 margin-left:-3px;
 position:absolute;
 z-index:99
}