ghosh / microtip

💬 Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.
https://microtip.vercel.app/
MIT License
1.38k stars 74 forks source link

Tooltip background-color #68

Open konstantin83 opened 3 years ago

konstantin83 commented 3 years ago

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 commented 2 years ago

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 commented 10 months ago

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