remove transparency from bootstrap tooltip

A

9

27

The standard .tooltip from twitter bootstrap has a transparency that I would like to remove.

This my HTML:

<a href="#" class="btn
btn-info" 
style="margin:10px;" 
data-toggle="tooltip" 
data-placement="bottom" 
data-html="true"
title="MERKNAD 1 Denne klassifiseringen er i henhold til NS-EN 13501-2. <br /><br /> MERKNAD 2 Valgene 11-16 gjelder bærende konstruksjoner, valgene 21-24 gjelder kun integritet, valgene 31-37 gjelder både integritet og isolasjon, valgene 41-46 gjelder bærende skiller konstruksjoner med isolasjonskrav, og valgene 51-54 gjelder seksjoneringsvegger og dekker.">Hover</a>

CSS:

.tooltip > .tooltip-inner {
    border: 1px solid;
    padding: 10px;
    max-width: 450px;
    color: black;
    text-align: left;
    background-color: white;
    background: white;
    opacity: 1.0;
    filter: alpha(opacity=100);
}
.tooltip > .tooltip-arrow {
    border-bottom-color: black;
}

Also I made a JSFiddle to illustrate, here: https://jsfiddle.net/fiddlejan/xpwhknja/

If you hover over the button you can see how the transparent tooltip text is also showing the text underneath.

I tried:

opacity: 1.0;
filter: alpha(opacity=100);

But it does't seem to work...

Alienable answered 29/1, 2016 at 11:28 Comment(4)

@A.Wolff It is for me in Chrome – Scalable 29/1, 2016 at 11:35

for me In firefox also. – Forthcoming 29/1, 2016 at 11:36

@A.Wolff It's a very slight transparency. If you look close, you will see it – Atwell 29/1, 2016 at 11:38

Oh guys you are correct. I'm curently testing it on laptop with some sun in eyes... My bad, sorry! – Communicant 29/1, 2016 at 11:40

W

29

Add .tooltip.in{opacity:1!important;} in css..By default it is 0.9 that's why background is transparent jsfiddle

Wield answered 29/1, 2016 at 11:40 Comment(0)

G

31

Bootstrap v4.0:

.tooltip.show {
    opacity: 1;
}

Gibraltar answered 10/4, 2018 at 10:42 Comment(0)

W

29

Add .tooltip.in{opacity:1!important;} in css..By default it is 0.9 that's why background is transparent jsfiddle

Wield answered 29/1, 2016 at 11:40 Comment(0)

S

10

Add to your .tooltip class also opacity 1, but with flag important. See updated Fiddle

And in your fiddle you connected bootstrap.min.css directly in html. So in your website you can write

.tooltip.in {
  opacity: 1;
  filter:alpha(opacity=100);
}

without any !important and it will work. But in fiddle it doesn't work because you didn't use for that css External Resources

Its because in your bootstrap.css you have

.tooltip.in{filter:alpha(opacity=90);opacity:.9}

Signalize answered 29/1, 2016 at 11:39 Comment(3)

You should use any more specific rule instead of using !important statement – Communicant 29/1, 2016 at 11:41

Surely you can override it with a parent element selector rather than !important – Vinnievinnitsa 29/1, 2016 at 11:44

@A.Wolff, @ShaneQful, you're right. But note, topic starter placed links directly to <html> in JSFiddle. If connect that styles normally, with external resources so no need for '!important'. – Signalize 29/1, 2016 at 11:50

S

3

Please use !important on opacity like-

.tooltip > .tooltip-inner {
  border: 1px solid;
  padding: 10px;
  max-width: 450px;
  color: black;
  text-align: left;
  background-color: white;
  background: white;

  opacity: 1.0;
  filter: alpha(opacity=100);
} 

.tooltip > .tooltip-arrow { border-bottom-color:black; }

.tooltip.in {
  opacity: 1 !important;
  filter: alpha(opacity=100);
}

Soluk answered 29/1, 2016 at 13:29 Comment(0)

P

3

When I needed to reduce the transparency of the tooltip provided by ngbTooltip this is what I added in my CSS file.

Note: I was using Bootstrap v4

::ng-deep .tooltip.show {
    opacity: 1!important;
}

Pork answered 27/9, 2018 at 11:50 Comment(0)

T

2

If you are using SCSS and Bootstrap 4 you can simply override the $tooltip-opacity variable as follows:

$tooltip-opacity: 1;

Twinkling answered 26/8, 2020 at 18:44 Comment(0)

T

1

Add this class :

.tooltip.in {
    opacity: 1 !important;
}

Teakwood answered 29/1, 2016 at 11:40 Comment(0)

T

1

You will need to be specific as the exact call is two classes in one element

    .tooltip.in{
opacity: 0.9;
}

in boostrap.min.css

So just override with opacity of 1;

Hope this helps, if not you will need !important or another parent element in front - but cant see your loading order on the page so not sure on precedence.

Toth answered 29/1, 2016 at 11:41 Comment(1)

Ya, body .tooltip.in{ opacity: 1; } fixes it – Communicant 29/1, 2016 at 11:44

M

0

Try this:

.tooltip {
  opacity: 1 !important;
}

Markmarkdown answered 23/5, 2023 at 12:53 Comment(0)

Recommended topics

Hot tags