Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip background-color #68

Open
konstantin83 opened this issue Sep 17, 2021 · 2 comments
Open

Tooltip background-color #68

konstantin83 opened this issue Sep 17, 2021 · 2 comments

Comments

@konstantin83
Copy link

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.

@egemenerd
Copy link

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.

@djadomi
Copy link

djadomi commented Nov 15, 2023

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants