我想更改工具提示的样式(来自tippy.js),并且完全按照此处文档中的说明进行操作:
Themes are created by including a class on the tippy-tooltip element as part of a selector in the form .tippy-tooltip.x-theme. Let's demonstrate this by creating our own theme called tomato:
.tippy-tooltip.tomato-theme {
background-color: tomato;
color: yellow;
}
To apply the theme, specify a theme prop without the -theme suffix:
tippy('button', {
theme: 'tomato',
});
但是由于某种原因,我的工具提示保持默认颜色,为什么?我添加了这种风格:
.tippy-tooltip.tomato-theme {
background-color: tomato;
color: yellow;
}
.infosvg {
width: 20px;
}
tooltippy {
position: absolute;
top: 150px;
left: 300px;
}
我的html<span class="tooltippy">
<img class="infosvg" src="assets/images/custom/icon_info.svg">
<div class="tooltipcontent darktext">Test</div>
</span>
我的js:$( ".tooltippy" ).each(function( i ) {
tippy(this, {
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
theme: 'tomato',
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
出了什么问题?我在十六进制或上面的文本中尝试了不同的颜色,但它仍然是默认的工具提示。
最佳答案
根据documentation你需要改变这一行:
.tippy-tooltip.tomato-theme {
至:.tippy-box[data-theme~='tomato'] {
而且,为了将样式添加到箭头,您还需要:.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
片段:$( ".tooltippy" ).each(function( i ) {
tippy(this, {
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
theme: 'tomato',
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
.tippy-box[data-theme~='tomato'] {
background-color: tomato;
color: yellow;
}
.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
border-right-color: tomato;
}
.infosvg {
width: 20px;
}
.tooltippy {
position: relative;
top: 150px;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div>
<span class="tooltippy">
<img class="infosvg" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Infobox_info_icon.svg">
<div class="tooltipcontent darktext">Test</div>
</span>
</div>
关于javascript - Tippy.js 自定义主题未应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65426429/