Twitter Bootstrap Question posted in

remove transparency from bootstrap tooltip – Twitter bootstrap

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…

Tags:

8

Answers


  1. 0

    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}
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
  3. 0

    Add this class :

    .tooltip.in {
    opacity: 1 !important;
}
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
  5. 0

    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);
}
    Login or Signup to reply.
  6. 0

    Bootstrap v4.0:

    .tooltip.show {
    opacity: 1;
}
    Login or Signup to reply.
  7. 0

    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;
}
    Login or Signup to reply.
  8. 0

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

    $tooltip-opacity: 1;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search