5

I'm using tippy.js for my browser and they'd been working fine until this morning. Suddenly, they won't respond to any CSS styling and just revert to the default dark grey background with a border radius. They respond to changes in the script though, like making them follow the cursor. Here's the script, I tried reinstalling a lot of it but I don't know what's happening.

<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<script>
tippy('[title]', {
    theme: 'custom',
    arrow: false,
    followCursor: true,
    
    content(reference) {
      const title = reference.getAttribute('title');
      reference.removeAttribute('title');
      return title;
    },
});
</script>

Here's the CSS, the stuff that's not working.

.tippy-tooltip.custom-theme {
  background-color: #f7f7f7;
  color: black;
  border:1px solid #ededed;
  border-radius:0;
}
Improve this question
2
  • a jsfiddle or a code snippet would be nice. and shouldn't the css selector be: .tippy-tooltip[data-theme~='custom']?
    – Ofir Baruch
    Commented Jan 13, 2021 at 13:37
  • I told the other person in a comment where it is if you want to take a look as well
    – user14727395
    Commented Jan 13, 2021 at 13:47

1 Answer 1

Reset to default
7

Instead of this .tippy-tooltip.custom-theme use .tippy-box[data-theme~="custom"]

Rest will be the same

.tippy-box[data-theme~="custom"] {
  background-color: #f7f7f7;
  color: black;
  border: 1px solid #ededed;
  border-radius: 0;
}

Codepen: https://codepen.io/manaskhandelwal1/pen/poExBZE

Documentation: https://atomiks.github.io/tippyjs/v6/themes/#creating-a-theme

Improve this answer
2
  • 1
    thanks, but that still doesn't seem to be working (I'd tried it beforehand as well). I am coding this all through tumblr so that could be the issue? the link to it is greenfig.tumblr.com if you want to look at the full code there
    – user14727395
    Commented Jan 13, 2021 at 13:46
  • @noahsczerny I have tested it, it seems like a Tumblr error.
    – Manas Khandelwal
    Commented Jan 13, 2021 at 14:25