Vuetify v-tooltip 无法更改 css

Question

我正在使用 vuetify 的 v-tooltip，我想对其 css 进行细微更改，例如不透明度 = 1 和内部填充 0。但我无法更改其上的任何 css。有人可以帮忙吗？

.v-tooltip {
font-size: 50px !important;
opacity: 1 !important;

}

这是我的 vue 代码

    <v-tooltip bottom>
                        <template v-slot:activator="{ on }">
                            <a
                                v-on="on"
                                @mouseover="mouseOver(item)"
                                @mouseleave="mouseLeave(item)"
                            >{{item.name}}</a>
...continued

Answer 1

内容在 下.v-tooltip__content。它也设置在元素本身上，因此important需要像您已经覆盖样式一样。

.v-tooltip__content {
  font-size: 50px !important;
  opacity: 1 !important;
  display: block !important;
}

Answer 2

对于较新版本的 Vuetify，@dreijntjens 提供的解决方案不再有效。类已更改，并且display不应触及 - 属性，因为这就是工具提示最初隐藏的方式。

下面是使叠加层背景变暗并增加字体大小的 CSS：

.v-tooltip > .v-overlay__content {
  background-color: rgba(var(--v-theme-surface-variant), 0.9) !important;
  font-size: 50px !important;
}