CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-tooltip
ganjan
ganjan

Reputation: 7576

remove transparency from bootstrap tooltip

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

Upvotes: 28

Views: 33081

Answers (9)

spidey
spidey

Reputation: 406

Try this:

.tooltip {
  opacity: 1 !important;
}

Upvotes: 0

Matt
Matt

Reputation: 1544

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

$tooltip-opacity: 1;

Upvotes: 2

Steffi Keran Rani J
Steffi Keran Rani J

Reputation: 4093

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

Upvotes: 3

galengodis
galengodis

Reputation: 933

Bootstrap v4.0:

.tooltip.show {
    opacity: 1;
}

Upvotes: 32

Govind jha
Govind jha

Reputation: 400

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

Upvotes: 3

Narek-T
Narek-T

Reputation: 1928

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}

Upvotes: 10

Jamie Paterson
Jamie Paterson

Reputation: 446

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.

Upvotes: 1

sanjeev jha
sanjeev jha

Reputation: 28

Add this class :

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

Upvotes: 1

Dhara
Dhara

Reputation: 1972

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

Upvotes: 29

Related Questions