Skip to content

Background color and text color variables #31

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Background color and text color variables #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,16 @@ By default, the tooltip will takeup only the size it requires to show the text.
Microtip uses **css variables**, which allows you to customize the behavior of the tooltip as per your needs.


| Variable | Description | Default Value |
|----------------------------------|----------------------------------------------------|---------------|
| `--microtip-transition-duration` | Specifies the duration of the tootltip transition | `.18s` |
| `--microtip-transition-delay` | The delay on hover before showing the tooltip | `0s` |
| `--microtip-transition-easing` | The easing applied while transitioning the tooltip | `ease-in-out` |
| `--microtip-font-size` | Sets the font size of the text in tooltip | `13px` |
| `--microtip-font-weight` | The font weight of the text in tooltip | `normal` |
| `--microtip-text-transform` | Controls the casing of the text | `none` |
| Variable | Description | Default Value |
|----------------------------------|----------------------------------------------------|------------------------|
| `--microtip-transition-duration` | Specifies the duration of the tootltip transition | `.18s` |
| `--microtip-transition-delay` | The delay on hover before showing the tooltip | `0s` |
| `--microtip-transition-easing` | The easing applied while transitioning the tooltip | `ease-in-out` |
| `--microtip-font-size` | Sets the font size of the text in tooltip | `13px` |
| `--microtip-font-weight` | The font weight of the text in tooltip | `normal` |
| `--microtip-text-transform` | Controls the casing of the text | `none` |
| `--microtip-background-color` | Sets the background color of the tooltip | `rgba(17, 17, 17, .9)` |
| `--microtip-text-color` | Sets the text color in the tooltip | `#ffffff` |

 

Expand All @@ -124,10 +126,12 @@ Example:-
--microtip-font-size: 13px;
--microtip-font-weight: bold;
--microtip-text-transform: uppercase;
--microtip-background-color: #ffffff;
--microtip-text-color: #222222;
}
```

The above code will cause all the tooltips to transition over `0.5s` while applying an easing of type `ease-out` after a delay of `1s`. The text will be `bold` and `uppercase` and have a font size of `13px`.
The above code will cause all the tooltips to transition over `0.5s` while applying an easing of type `ease-out` after a delay of `1s`. The text will be black and `bold` and `uppercase` and have a font size of `13px`. The background color will be white.

You could also customize the tooltip for individual instances by using a selector more specific than `:root`. Example:-

Expand Down
4 changes: 2 additions & 2 deletions microtip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@
}

[aria-label][role~="tooltip"]::after {
background: rgba(17, 17, 17, .9);
background: var(--microtip-background-color, rgba(17, 17, 17, .9));
border-radius: 4px;
color: #ffffff;
color: var(--microtip-text-color, #ffffff);
content: attr(aria-label);
font-size: var(--microtip-font-size, 13px);
font-weight: var(--microtip-font-weight, normal);
Expand Down