如何更改HTML中的工具提示（div的標題）背景顏色

我有下面的html，如何使用span的標題屬性div來應用樣式。我爲id'tooltip-value'應用了一個背景顏色，在這種情況下它不適用，如何使它工作？如何更改HTML中的工具提示（div的標題）背景顏色

這裏是的jsfiddle鏈接， http://jsfiddle.net/KendoDev/qtyL1rdm/

<div class="tooltip"> 
     <div id='column1' title='<span id="tooltip-value">1</span>' style="width: 40px;">1</div> 
     <div id='column2' title="2" style="width: 20px;">2 </div> 
    </div>

來源

2014-10-06 Dev

回答這個造型messege這裏：http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribu TE-裏面最錨標籤 – helllomatt 2014-10-06 19:04:32

你不能風格默認提示，但你可以使用data-attributes與使用content:attr(data-attribute);

.tooltip{padding:20px 0;} 
.tooltip div { 
    font: 10px sans-serif; 
    background-color: blue; 
    text-align: right; 
    padding: 3px; 
    margin: 1px; 
    color: white; 
} 
#column1 { 
    font: 10px sans-serif; 
    background-color: blue; 
    text-align: right; 
    padding: 3px; 
    margin: 1px; 
    color: white; 
    display: inline-block; 
    position:relative; 
} 

#column1:after{ 
    content:attr(data-title); 
    position:absolute; 
    bottom:100%; 
    left:100%; 
    color:#fff; 
    background:#000; 
    padding:5px; 
    display:none; 
} 
#column1:hover:after{display:block;} 
#column2 { 
    font: 10px sans-serif; 
    background-color: Red; 
    text-align: right; 
    padding: 3px; 
    margin: 1px; 
    color: white; 
    display: inline-block; 
    position:relative; 
} 
#column2:after{ 
    content:attr(data-title); 
    position:absolute; 
    bottom:100%; 
    left:100%; 
    color:#000; 
    background:#eee; 
    padding:5px; 
    display:none; 
} 
#column2:hover:after{display:block;}

DEMO

來源

2014-10-06 19:10:10 Anon

回答

相關問題