文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS3工具提示背景

问CSS3工具提示背景
EN

Stack Overflow用户

提问于 2014-01-03 10:44:43

回答 2查看 223关注 0票数 1

我的网站上有引导程序，但我不喜欢工具提示中的css，所以我用菜单-酷的CSS3提示来覆盖他。

在工具提示的背景中，我得到了一个我不想要的灰色/透明背景。我尝试删除填充或一些背景属性在引导和覆盖我的css，但没有成功。

.tooltip
{
    width:200px;
    padding: 10px 20px;
    margin-top: 20px;
    margin-left: -85px;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    position: absolute;

    font-family: Arial;
    font-size: 12px;
    font-style: normal;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: 2px 2px 2px #999;
    -moz-box-shadow: 2px 2px 2px #999;
    box-shadow: 2px 2px 2px #999;

    -webkit-transition-property:opacity, margin-top, visibility, margin-left;
    -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;

    -moz-transition-property:opacity, margin-top, visibility, margin-left;
    -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
    -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;

    -o-transition-property:opacity, margin-top, visibility, margin-left;
    -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
    -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;

    transition-property:opacity, margin-top, visibility, margin-left;
    transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
}
/*a.tooltip > span:hover,*/
.tooltip.in
{
    opacity: 1;
    text-decoration:none;
    visibility: visible;
    overflow: visible;
    margin-top:20px;
    display: inline;
    margin-left: -60px;
}

tooltip.top{

    width: 15px;
    height: 15px;
    margin-left: 20px;
    margin-top: -19px;

    display: block;
    position: absolute;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -webkit-box-shadow: inset -1px 1px 0 #fff;
    -moz-box-shadow: inset 0 1px 0 #fff;
    -o-box-shadow: inset 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff;

    display: none;
}

.tooltip-inner  {
    color: #FFFFFF;

    background: #0033CC;
    background: -moz-linear-gradient(top, #0033CC 0%, #0099FF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0033CC), color-stop(100%,#0099FF));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0033CC', endColorstr='#0099FF',GradientType=0 );

    border: 1px solid #000000;
}

.tooltip-top {
    background: #0033CC;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
}

这是一个工作Jsfiddle链接。注意，在css中，工具提示属性位于末尾，bootstrap.js和css是链接的。

twitter-bootstrap

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-01-03 10:53:54

这是因为引导程序中的box-shadow属性造成了这个问题。您可以通过将以下代码添加到自定义CSS中来覆盖它。

工作演示

CSS

.tooltip {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

票数 1

Stack Overflow用户

发布于 2016-06-08 06:28:47

您可以像这样用您的css覆盖引导css

而不是引导css编写以下代码

.tooltip
 {
  box-shadow:none;
  border:none;
  background-color:transparent;
 }

要获得完整的教程自定义工具提示教程，请访问此处http://talkerscode.com/webtricks/create-simple-tooltip-using-css3.php

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20901769

复制

相似问题

问CSS3工具提示背景
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3工具提示背景EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3工具提示背景
EN