时间戳

首页 > 解决方案 > tippy.js 工具提示不响应 CSS 样式

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

问题描述

我正在为我的浏览器使用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;
}

标签： javascripthtmlcsstippyjs

解决方案

而不是这种.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;
}

代码笔： https ://codepen.io/manaskandelwal1/pen/poExBZE

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

推荐阅读