如何解决reactstrap工具提示自定义css不起作用 结果结果
任何有Reactstrap软件包经验的人都知道如何更改箭头的颜色和出现的工具提示的不透明度?我尝试了几种解决方案,但找不到答案。 我的代码如下:
<Tooltip
autohide={false}
className={styles.tooltip}
innerClassName={styles.TextWithTooltip_tooltip}
arrowClassName={styles.arrow}
trigger="click hover focus"
id={id}
role="tooltip"
placement="bottom"
target={tooltipRef.current}
toggle={toggle}
isOpen={tooltipOpen}
>
{tooltipContent}
</Tooltip>
我尝试过:
.TextWithTooltip {
&_tooltip {
border-radius: 10px !important;
opacity: 0.5 !important;
text-align: left !important;
max-width: 580px !important;
background-color: $white !important;
color: $blue !important;
font-weight: 400;
font-size: 16px;
line-height: 1.56;
padding: 18px 20px !important;
box-shadow: 0 0 9px 4px rgba(214,214,0.5);
@media (max-width: $mobile-max-width) {
max-width: 300px !important;
}
}
&_icon {
padding: 5px;
}
&_label {
font-size: 18px;
color: $blue;
font-weight: 700;
margin-bottom: 10px;
@media (max-width: $mobile-max-width) {
font-size: 17px;
max-width: 100%;
}
}
}
.tooltip-inner {
opacity: 1 !important;
}
.bs-tooltip-bottom .arrow::before,.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: aqua !important; // default is #000;
}
但没有任何效果。 如果有人知道解决方案,将不胜感激。
解决方法
这可以通过CSS完成。如果您不想全局更改所有工具提示,请使用CSS选择器。
编辑1:您需要使用border-bottom-color
来指向向上的箭头。签出此文档:https://css-tricks.com/snippets/css/css-triangle/
编辑1:您在SCSS中使用的是.tooltip.inner
,{>
编辑2:您必须使用.tooltip-inner
覆盖大多数引导程序规则。
箭头(工具提示位于底部)
!important
结果
工具提示不透明度
.bs-tooltip-bottom .arrow::before,.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: aqua !important; // default is #000;
}
结果
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。