user3086644 user3086644 - 5 months ago 18
jQuery Question

CSS3 tooltip background

I have bootstrap on my website but I don't like the css on the tooltip, so I override him with Menu-cool CSS3 Tootips.

The thing is in the background of the tooltip, I get a gray/transparent background that I don't want. I Have tried remove padding or some of the background properties within bootstrap and the override of my css with no success.

.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;
}


Here is a Working Jsfiddle link.
Notice that in the css, the tooltip properties are at the end, bootstrap.js and css are linked.

Answer

This is because box-shadow property in bootstrap is making this issue. You can override it by adding the below code to your custom CSS.

Working Demo

CSS

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