如何更改工具提示背景颜色

How to change tooltip background color?

本文关键字：颜色 背景 工具提示 何更改      更新时间：2023-09-26

我在 html 文件中创建了一个工具提示，如下所示：

<span title="" class="duedate-warning-msg"></span>

我像这样设置 CSS 属性：

.duedate-warning-msg{
     background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
    border-color: #f5c7c7;
    padding: .5em 0.25em 0.5em 2.5em;
    title:"my tooltip";
    color: #D11006;
}
span:hover{
    position:relative;
}
span[title]:hover:after {
    content: "This statement is past due.";
    padding: 4px 8px;
    color: white;
    font-size:16px;
    font-family: "open_sansregular";
    background: #0679ca;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

上述样式完美地创建了工具提示。我面临的唯一问题是我希望工具提示的背景颜色是蓝色。但它总是显示灰色。为什么会这样？

删除background-image并添加background，如下所示：

span[title]:hover:after {
    content: "This statement is past due.";
    padding: 4px 8px;
    color: white;
    font-size:16px;
    font-family: "open_sansregular";
    background: #0679ca;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background: #00F;
}

很简单，在background-image属性中，假设您要保持淡入淡出到几乎白色 （#eeeeee） 渐变的颜色，将#cccccc替换为您选择的颜色。

从span[title]:hover:after中删除背景图像

这是工作演示

相关文章：