Tippy.js is a great library that allows you to seamlessly create beatiful popovers. However, I personally miss some of theming capabilities, which led me to come up with a solution on how to override the default theme using Tailwind CSS .

.tippy-box[data-theme~='light'] {  
    @apply bg-red-200;  
}
  
.tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before {  
    @apply border-t-green-200;  
}  
  
.tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before {  
    @apply border-l-green-200;  
}  
  
.tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before {  
    @apply border-r-green-200;  
}  
  
.tippy-box[data-theme~='light'][data-placement^='bottom'] > .tippy-arrow::before {  
    @apply border-b-green-200;  
}

As you probably noticed, I have overridden the default “Light” theme, but you can also add your own. Please read the documentation .

Dark mode

You can use any Tailwind modifiers as well. Here I used dark: to make sure the styles are applied on the Dark Mode.

.tippy-box[data-theme~='light'] {
    @apply dark:bg-red-200;
}

.tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before {
    @apply dark:border-t-green-200;
}

.tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before {
    @apply dark:border-l-green-200;
}

.tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before {
    @apply dark:border-r-green-200;
}

.tippy-box[data-theme~='light'][data-placement^='bottom'] > .tippy-arrow::before {
    @apply dark:border-b-green-200;
}

Demo

These are examples of styles applied to Rotate, the tool I’m building to manage rotations of engineering teams. Check out the progress on Twitter .