tippy.js tooltips not responding to css styling

Question

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

Halpin

a jsfiddle or a code snippet would be nice. and shouldn't the css selector be: .tippy-tooltip[data-theme~='custom']? – Cervicitis

I told the other person in a comment where it is if you want to take a look as well – Halpin

Answer 1

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

Mcclimans

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 – Halpin

@noahsczerny I have tested it, it seems like a Tumblr error. – Mcclimans