I am trying to customize the tooltip style by changing the background color to white. I have used the following CSS code:
HTML code:
<th rowspan="2" style="text-align: center">Test <sup><img src="assets/icons/help.png" data-toggle="tooltip" title="test test" data-flow="bottom"></sup></th>
CSS code:
[data-tooltip] {
position: relative;
cursor: pointer;
background-color: #FFFFFF;
color: #16181b;
width:100%;
}
[data-tooltip]:before,
[data-tooltip]:after {
line-height: 1;
font-size: .9em;
pointer-events: none;
position: absolute;
box-sizing: border-box;
}
However, the changes are not being applied. Can anyone provide guidance on how to fix this?
Current state:
https://i.sstatic.net/lgGj7.pngDesired outcome:
https://i.sstatic.net/bbKBe.png
I have managed to change the background color using the following code:
::ng-deep .tooltip-inner {
width: 700px;
height: 500px;
text-align: left;
background-color: #fff;
color: #000;
box-shadow: 0 0 3px #00000040;
}
However, the tooltip is appearing under the border of the cell as shown here: https://i.sstatic.net/cnkHK.png How can I make it appear above the border?