remove transparency from bootstrap tooltip

Question

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

@A.Wolff It's a very slight transparency. If you look close, you will see it — NiallMitch14, Jan 29 '16 at 11:38
Oh guys you are correct. I'm curently testing it on laptop with some sun in eyes... My bad, sorry! — A. Wolff, Jan 29 '16 at 11:40

score 29 · Answer 1 · answered Apr 10 '18 at 10:42

29

Bootstrap v4.0:

.tooltip.show {
    opacity: 1;
}

answered Apr 10 '18 at 10:42

galengodis

901
1
9
18

score 28 · Accepted Answer · answered Jan 29 '16 at 11:40

28

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

answered Jan 29 '16 at 11:40

Dhara

1,914
2
18
37

Narek-T · Answer 3 · 2016-01-29T11:52:43.547

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}

edited Jan 29 '16 at 11:52

answered Jan 29 '16 at 11:39

Narek-T

1,898
10
20

You should use any more specific rule instead of using `!important` statement – A. Wolff Jan 29 '16 at 11:41
Surely you can override it with a parent element selector rather than !important – ShaneQful Jan 29 '16 at 11:44
1

@A.Wolff, @ShaneQful, you're right. But note, topic starter placed links directly to `` in JSFiddle. If connect that styles normally, with `external resources` so no need for '!important'. – Narek-T Jan 29 '16 at 11:50

score 3 · Answer 4 · answered Jan 29 '16 at 13:29

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

Steffi Keran Rani J · Answer 5 · 2018-09-27T12:11:55.390

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

edited Sep 27 '18 at 12:11

answered Sep 27 '18 at 11:50

Steffi Keran Rani J

3,667
4
34
56

score 2 · Answer 6 · answered Aug 26 '20 at 18:44

2

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

$tooltip-opacity: 1;

answered Aug 26 '20 at 18:44

Matt

1,446
19
17

score 1 · Answer 7 · answered Jan 29 '16 at 11:40

1

Add this class :

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

answered Jan 29 '16 at 11:40

sanjeev jha

28
3

score 1 · Answer 8 · answered Jan 29 '16 at 11:41

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.

answered Jan 29 '16 at 11:41

Jamie Paterson

426
3
10

Ya, `body .tooltip.in{ opacity: 1; }` fixes it – A. Wolff Jan 29 '16 at 11:44

score 0 · Answer 9 · edited May 23 '23 at 20:25

0

Try this:

.tooltip {
  opacity: 1 !important;
}

edited May 23 '23 at 20:25

Tyler2P

2,324
26
22
31

answered May 23 '23 at 12:53

spidey

378
3
8

remove transparency from bootstrap tooltip

9 Answers9