1

I set up my a elements to have opacity: 0.6 when they are hovered, yet this also affects my tooltips and fades them.

I am using Bootstrap 4.

I have tried the following with/without data-, :hover and >.

  1. img[data-toggle=tooltip]:hover .tooltip { opacity: 1 }
  2. a *[data-toggle=tooltip] .tooltip { opacity: 1 }
  3. a:hover > img[data-toggle=tooltip] > .tooltip { opacity: 1 }

Here is the style that it's conflicting with (which is before the styles above, so it should be applied:

a:hover {
  color: red;
  opacity: 0.6;
  text-decoration: none;
}

a:focus {
  color: red;
  opacity: 0.3;
  outline: 0;
  text-decoration: none;
}

And this is how I have it set up in my HTML:

<a href="#">
  <img class="card botdrop foot-brand" data-toggle="tooltip"
                                       data-placement="top"
                                       data-title="Twitter" 
                                       src="picture.png"
                                       data-original-title=""
                                       title="">
</a>

How can I make it so the tooltip is fully opaque when it appears and not opacity: 0.6?

Jake
  • 1,086
  • 12
  • 38

1 Answers1

0

Since the tool tip is a child of the a element it will 'inherit' this property.

This solution may help you: How to apply an opacity without affecting a child element with html/css?

Murchiad
  • 103
  • 10