How to style tippy.js with tailwind css?

Question

I am using tippy.js with alpine js and can't figure out how I can edit the style of it.

I saw this thread tippy.js tooltips not responding to css styling but doesn't seem to work when I try the solution in app.css for laravel project

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://unpkg.com/tippy.js@6/dist/tippy.css');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components {

    /* Customizing Tooltip Design */
    .tippy-box {
        background-color: #171E33;
        color: black;
        border: 1px solid #ededed;
        border-radius: 0;
      }
    ...

Even using the documentation where it shows the class names https://atomiks.github.io/tippyjs/v5/themes/

<div class="tippy-popper">
  <div class="tippy-tooltip" data-placement="top">
    <div class="tippy-content">
      My content
    </div>
  </div>
</div>

I tried to target it directly just to change anything, and no luck.

.tippy-content {
        background-color: tomato;
        color: yellow;
      }

I am really lost on how this works, and would appreciate any help or guidance on how I can go about solving this.

score 4 · Accepted Answer · answered Jun 07 '22 at 19:34

You are using tippy.js v6, but reading docs for v5. In v6 we need to use data-theme attribute for a custom theme. Lets call our custom theme voyager. We set it for the tippy.js targets:

tippy(targets, {
  theme: 'voyager',
});

And in the CSS file it's important that we do not put our custom styles in @layer components {} because TailwindCSS will detect them as unused styles and wont include them in the compiled CSS file.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://unpkg.com/tippy.js@6/dist/tippy.css');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Customizing Tooltip Design 
  TailwindCSS will always include this! */
.tippy-box[data-theme~='voyager'] {
  background-color: #171E33;
  color: red;
  border: 1px solid #ededed;
  border-radius: 0;
}


@layer components {
   /* Normal TailwindCSS components */
}

score 2 · Answer 2 · answered Jun 19 '22 at 07:42

You need to override certain classes. Here the solution that works for me, notice the dark mode modifiers:


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

I've compiled a quick article about that for more info: https://heydarmen.com/blog/styling-tippy.js-with-tailwind-css-including-dark-mode.html

How to style tippy.js with tailwind css?

2 Answers2