如何在 html 中更改工具提示（div 的标题）背景颜色答案

【问题标题】：How to change the tooltip (title of the div) background color in html如何在 html 中更改工具提示（div 的标题）背景颜色
【发布时间】：2014-10-07 03:19:42
【问题描述】：

我有以下 html，如何使用 span 为 div 的 title 属性应用样式。我为 id 'tooltip-value' 应用了背景颜色，但在这种情况下没有应用，如何使它工作？

这里是 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>

【问题讨论】：

在这里回答：stackoverflow.com/questions/2011142/…

标签： javascript css html

【解决方案1】：

您无法设置默认工具提示的样式，但您可以使用 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

【讨论】：