javascript - tippy.js tooltips not responding to css styling - Stack Overflow

admin管理员组

文章数量:1290779

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="/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src=".js@6/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="/@popperjs/core@2"></script>
<script src=".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;
}

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./@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg./tippy.js@6/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg./@popperjs/core@2"></script>
<script src="https://unpkg./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;
}

• javascript
• html
• css
• tippyjs

Share Improve this question Follow asked Jan 13, 2021 at 13:32 user14727395user14727395 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 ment where it is if you want to take a look as well – user14727395 Commented Jan 13, 2021 at 13:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascripttippyjs tooltips not responding to css stylingStack Overflow