microtip icon indicating copy to clipboard operation
microtip copied to clipboard

Tooltip background-color

Open konstantin83 opened this issue 4 years ago • 2 comments

Hey! Thanks for wonderful and tiny clean script, it's very handy and easy to use.

But is there a way to change background color of both tooltip background AND tooltip arrow? In my case arrow always stays black.

konstantin83 avatar Sep 17 '21 18:09 konstantin83

Tooltip background; [aria-label][role~="tooltip"]::after{ background:#fff; }

Arrow is a svg. Open the CSS file and search for background:url( .You will find what you need to change.

egemenerd avatar Oct 18 '21 14:10 egemenerd

Having just done this, I thought I might as well paste in what I did.

This is to apply to the top and bottom versions.

[aria-label][role~="tooltip"]::after {
	background: rgba(200, 200, 200, 0.95);

[aria-label][role~="tooltip"]::before {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28200,%20200,%20200,%200.95%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
}
[role~="tooltip"][data-microtip-position|="bottom"]::before {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28200,%20200,%20200,%200.95%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
}

djadomi avatar Nov 15 '23 10:11 djadomi