從工具提示隱藏標題

Question

我正在使用CSS提示工具提示。現在，使用下面的HTML代碼

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

下面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; 
} 

現在它的工作原理，當我在它懸停顯示工具提示，但它也顯示標題... 我如何刪除下面圖片中以橙色標出的內容。

Answer 1

根本就不通過title屬性添加的內容，將其更改爲類似data-tooltip。

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

jsFiddle example

你可以使用JS/jQuery的，但考慮到你正在服用的方法，它是不可能隱藏/刪除它，同時保持功能，因爲你會什麼都沒有通過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; 
}