javascript - How to change the tooltip (title of the div) background color in html -

javascript - How to change the tooltip (title of the div) background color in html -

i have below html, how apply styling using span title attribute of div. applied background color id 'tooltip-value' , not applied in case, how create work?

here jsfiddle link, 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>

you can't style default tooltip can utilize data-attributes styling messege using 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

javascript html css html5