tippy.js工具提示不响应CSS样式

Question

tippy.js工具提示不响应CSS样式

5

我在浏览器中使用tippy.js, 一直都很好用，但是今天早上突然出问题了。它们不再响应任何CSS样式，只回退到默认的深灰色背景和边框半径。但它们仍会响应脚本的更改，例如跟随光标移动。

以下是脚本内容，我尝试重新安装很多次，但不知道发生了什么问题。

<!-- 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>

这里是CSS，就是那些不起作用的东西。

.tippy-tooltip.custom-theme {
  background-color: #f7f7f7;
  color: black;
  border:1px solid #ededed;
  border-radius:0;
}

- user14727395

一个 jsfiddle 或者代码片段会很好。而且 CSS 选择器不应该是：.tippy-tooltip[data-theme~='custom'] 吗？ - Ofir Baruch

我在评论中告诉了另一个人它在哪里，如果你想去看看的话。 - user14727395

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- panda · Accepted Answer

不要使用.tippy-tooltip.custom-theme，而是使用.tippy-box[data-theme~="custom"]

其他部分保持不变。

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

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

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