Nascondi titolo dal tooltip

Question

Sto facendo un suggerimento usando CSS. Ora utilizzando il seguente codice HTML

<div title="This is some information for our tooltip." class="progress3"> 
</div> 

e il seguente CSS

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

.progress3: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; 
content: attr(title); 
} 

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

Ora funziona, quando mi passa il mouse su di essa mostra il tooltip, ma mostra anche il titolo ... Come faccio rimuovi ciò che è cerchiato in arancione nell'immagine qui sotto.

Answer 1

Semplicemente non aggiungono il contenuto tramite l'attributo title, modificarlo a qualcosa come data-tooltip.

.progress3:hover:after { 
    content: attr(data-tooltip); 
} 

jsFiddle example

Si potrebbe utilizzare JS/jQuery, ma data l'approccio che sta assumendo, è impossibile nascondere/rimuovere mantenendo funzionalità si dovrebbe quindi avere nulla da aggiungere tramite CSS ..

HTML

<div data-tooltip="This is some information for our tooltip." class="progress3"> 
</div> 

CSS

.progress3 { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    background: red; 
} 

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

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