Custom Theme Not Being Applied

[maweitzman]

Recently (as of two weeks ago) my Tippy tooltips have stopped using the custom themes I've created. After looking at documentation very closely and scouring the web, I'm following all directions to a T.

Here is my JavaScript:

import tippy, {roundArrow, delegate} from 'tippy.js';
import 'tippy.js/dist/svg-arrow.css';
import 'tippy.js/animations/shift-away.css';

tippy.setDefaultProps({
    allowHTML: true,
    animation: 'shift-away',
    duration: [300, 0],
    inertia: true,
    interactive: true,
    placement: 'top',
    touch: 'hold',
});

delegate('body', {
    target: '[data-tippy-content]',
});

tippy('[data-tippy-content]:not([data-tippy-unwrapped], [data-tippy-sharethis])', {
    theme: 'tailwind',
    arrow: roundArrow
});

tippy('[data-tippy-unwrapped]', {
    theme: 'unwrapped',
    placement: 'top-start'
});

tippy('[data-tippy-sharethis]', {
    theme: 'unwrapped',
    placement: 'top-start',
    onMount: (instance) => {
        window.__sharethis__.initialize();
    }
});

Here is my CSS where I define all the custom themes:

.tippy-box[data-theme~='tailwind'] {
    @apply px-2 py-1 text-sm text-white rounded-md bg-gray-darkest;
}

.tippy-box[data-theme~='unwrapped'] {
    @apply p-0;
}

.tippy-box[data-theme~='tailwind'] > .tippy-svg-arrow {
    @apply fill-current text-gray-darkest;
}

.tippy-box[data-theme~='tailwind'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='tailwind'][data-placement^='right'] > .tippy-arrow::before,
.tippy-box[data-theme~='tailwind'][data-placement^='bottom'] > .tippy-arrow::before,
.tippy-box[data-theme~='tailwind'][data-placement^='left'] > .tippy-arrow::before {
    @apply border-gray-darkest;
}

.sharethis-inline-share-buttons {
    @apply space-y-2;
}

[id^="st-"] .st-btn {
    width: 100%;
    display: block !important;
}

[id^="st-"].st-has-labels .st-btn.st-remove-label > span {
    display: inline-block !important;
}

Can anyone help me, please?

[atomiks]

Hmm I haven't published a new version for months so this seems like it might be caused by something you added. There's no reason it randomly just stopped working without some CSS you added that's causing conflicts. Inspect DevTools?

[maweitzman]

Hmmm, I can’t think of anything and I have done all the inspecting already. Would you by chance be willing to hop on a quick zoom call to see if you might notice something — it would be a huge help? This is the last thing holding up a big release of ours at work.

On Wed, Feb 9, 2022 at 4:28 AM James N ***@***.***> wrote: Hmm I haven't published a new version for months so this seems like it might be caused by something you added. There's no reason it randomly just stopped working without some CSS you added that's causing conflicts. Inspect DevTools? — Reply to this email directly, view it on GitHub <#1030 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEHSCCKLU4DQ4ZPUEMHQGLDU2I6UPANCNFSM5N3QOQMQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- May You Be Blessed, Michael Weitzman

[erondpowell]

@maweitzman Did you ever get this worked out?
I just had basically the same issue, posted here: #1123