The way tippy currently handles tooltip styles is with a .tippy-box[data-theme~='dark'][data-placement^='right'] class. And yeah, thats fine, until you want to:
Use native CSS tooling like @prefers-color-scheme
Use custom properties
be able to edit the theme of them dynamically with a class or attribute on the body
etc
All of these problems are created because the class/selector does not style the tooltip, the JavaScript just copies it directly into the tooltips style="".
Solution
I propose just letting the tippy-box, tippy-arrow, etc classes style tooltips without the theme attribute, and not hardcoding the styles. Instead you just apply the class and the browser will handle the rest. The data-placement property seems unavoidable though.
And we do probably want to keep the abbility to have multiple themes for tooltips, so we could instead use conbinator classes. (e.g., .tippy-box.dark-theme could select one set, and .tippy-box.light-theme for the other, although this should not be the only way). That would simply be two classes that are applied as needed and because of the lack of a space between them in the selector, it will only activate when it has both classes.
Addituioanlly, any tooltips without a specified theme should get a .default class so we can style them with native css tools like @prefers-color-scheme.
Problem
The way tippy currently handles tooltip styles is with a
.tippy-box[data-theme~='dark'][data-placement^='right']class. And yeah, thats fine, until you want to:@prefers-color-schemeAll of these problems are created because the class/selector does not style the tooltip, the JavaScript just copies it directly into the tooltips style="".
Solution
I propose just letting the
tippy-box,tippy-arrow, etc classes style tooltips without the theme attribute, and not hardcoding the styles. Instead you just apply the class and the browser will handle the rest. Thedata-placementproperty seems unavoidable though.And we do probably want to keep the abbility to have multiple themes for tooltips, so we could instead use conbinator classes. (e.g.,
.tippy-box.dark-themecould select one set, and.tippy-box.light-themefor the other, although this should not be the only way). That would simply be two classes that are applied as needed and because of the lack of a space between them in the selector, it will only activate when it has both classes.Addituioanlly, any tooltips without a specified theme should get a
.defaultclass so we can style them with native css tools like@prefers-color-scheme.