I want to change title background color on hover of tool-tip

Question

I wanna to change the background-color title on hover and not when is not hover. The problem is when I hover the element the title remains with light grey color(I think is default value color). I want to change the background in black color

<a class="popover-title" data-toggle="tooltip" data-trigger="hover"
                    title="test" 
             popover-append-to-body="true">

with this style

 .myStyle{
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
    background-color: black;
    border-radius: 0.25rem;
  }

SOLVED

I found a solution

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}
[data-title]:after {
 content: attr(data-title);
 max-width: 200px;
 background-color: #000;
 color: #fff;
 position: absolute;
 text-align: center;
 padding:  0.25rem 0.5rem;
 border-radius: 0.25rem;
 font-style: normal;
 font-weight: 400;
 line-height: 1.5;
 z-index: 99999;
 visibility: hidden;
}
[data-title] {
  position: relative;
}

But the problem is when I want to put the translate it doesnt work and the tooltip returns transparant

<a class="font-weight-bold font-xs btn-block text-muted" data-toggle="tooltip" data-placement="bottom"
                [attr.data-title]="'test' | translate" 
          popover-append-to-body="true">

it doesn't work.! I update the question with 2 pictures.. the it's what I want but the second is what is it now!! — travis_911, Nov 12 '19 at 10:03
Does this answer your question? [Change Bootstrap tooltip color](https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color) — Awais, Nov 12 '19 at 10:09

score 0 · Answer 1 · answered Nov 12 '19 at 09:50

0

You could use conventional CSS for this.

.popover-title:hover {
    background-color: black;
}

answered Nov 12 '19 at 09:50

Sam

1,736
8
15

it doesn't work.! I update the question with 2 pictures.. the it's what I want but the second is what is it now!! – travis_911 Nov 12 '19 at 10:02

score 0 · Answer 2 · answered Nov 12 '19 at 09:50

0

For hover you need to write css with :hover For you the code should be as below:

 .myStyle:hover {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
    background-color: black;
    border-radius: 0.25rem;
  }

answered Nov 12 '19 at 09:50

Priyanka

287
1
11

it doesn't work.! I update the question with 2 pictures.. the it's what I want but the second is what is it now!! – travis_911 Nov 12 '19 at 10:03
May be you are looking for this http://jsfiddle.net/ckxSs/16/ – Priyanka Nov 12 '19 at 10:12
can you please create fiddle or pen for your code ? where I can see the actual code ? – Priyanka Nov 12 '19 at 10:25

score 0 · Answer 3 · answered Nov 12 '19 at 09:52

0

You are targeting wrong class. Try this

.popover-title:hover{
   color: #000;
  background-color: #fff;
}

Change the color and background-color as you want

answered Nov 12 '19 at 09:52

Awais

4,752
4
17
40

it doesn't work.! I update the question with 2 pictures.. the it's what I want but the second is what is it now!! – travis_911 Nov 12 '19 at 10:03
I think you are looking for this [https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color](https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color) – Awais Nov 12 '19 at 10:08
"bootstrap": "4.1.3" – travis_911 Nov 12 '19 at 10:08

score 0 · Answer 4 · answered Nov 12 '19 at 09:55

0

This will help.

.popover-title:hover {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: green;
    text-align: center;
    background-color: green;
    border-radius: 0.25rem;
  }

answered Nov 12 '19 at 09:55

st1612

33
6

it doesn't work.! I update the question with 2 pictures.. the it's what I want but the second is what is it now!! – travis_911 Nov 12 '19 at 10:02

score 0 · Answer 5 · answered Nov 12 '19 at 09:57

0

apply background-color property for 'popover-title' class like below.

.popover-title:hover{
  background-color: #fff;
}

If above propery is overwritten use !important.

.popover-title:hover{
  background-color: #fff!important;
}

answered Nov 12 '19 at 09:57

VijayVishnu

537
2
11
34

score 0 · Answer 6 · answered Nov 12 '19 at 12:05

Tooltips rely on the 3rd party library Tether for positioning. You must include propper.min.js or any other Library

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script>

<script>
  $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();
  });
</script>

I want to change title background color on hover of tool-tip

6 Answers6