当用户将鼠标悬停在 div 上时,我正在使用 v-tooltip 显示一些内容。它在开发中工作没有问题。
但是,当我为生产环境构建它并转移到 prod 环境时,自定义 css 不适用于我的工具提示。
我使用的 v-tooltip 版本是 ^2.0.0-rc.33
以下是我的代码。
<div class="comments" @mouseover="mouseOverTooltip()" v-tooltip="{
content: a.note,
placement: 'top',
classes: ['o-tooltip'] }">
<span class="title">{{a.note}}</span></div>
我正在使用以下 CSS
.comments >>> .h-tooltip.vue-tooltip {
box-sizing: border-box;
font-size: 11px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: normal;
color: #3d3d3d;
background-color: #fff;
max-width: 100%;
padding:8px 8px 5px 8px;
border-radius: 4px;
border: solid 2px #1cacac;
box-shadow: 0 7px 8px 0 rgba(170, 170, 170, 0.2), 0 5px 22px 4px rgba(170, 170, 170, 0.14), 0 12px 17px 2px rgba(170, 170, 170, 0.12)
}