自定义UIkit tooltip样式时无法修改字体大小问题咨询

问题复现 #

给复选框绑定UIkit tooltip时，已经成功修改tooltip字体颜色、背景色，但字体大小调整始终不生效，尝试添加自定义类也没有效果，当前代码如下：

<Checkbox label='Virtual' uk-tooltip="test text" />

.uk-tooltip.uk-active {
    color: yellow !important;
    font-size: 0.5rem !important;
    background-color: black;
}

失效原因&解决方法 #

样式不生效是两个常见问题导致的，对应调整即可：

• 作用域限制问题：UIkit的tooltip节点是动态插入到<body>末尾的全局节点，如果你是在React/Vue单组件的scoped样式块里写上述CSS，选择器默认无法命中组件外的全局节点。把tooltip相关样式移到全局CSS文件里即可。
• 选择器权重不足：UIkit默认在.uk-tooltip基类上就定义了字号属性，仅叠加.uk-active类的选择器权重如果和默认样式权重持平，会被框架默认样式覆盖。

两种写法都可以实现字号修改：

1. 覆盖内置CSS变量（推荐，维护性更好）
   直接在全局样式里重置UIkit预留的tooltip字号变量即可，不需要加!important：

   .uk-tooltip {
       --uk-tooltip-font-size: 0.5rem;
       color: yellow;
       background-color: black;
   }
   

2. 提升选择器权重强制覆盖
   给选择器增加上层节点锚点提升权重，配合!important强制覆盖默认样式：

   body .uk-tooltip.uk-active {
       color: yellow !important;
       font-size: 0.5rem !important;
       background-color: black;
   }
   

单个tooltip自定义样式方法 #

如果不需要全局修改，只想给当前这个复选框的tooltip单独设字号，可以在tooltip配置里指定自定义类名：

<Checkbox label='Virtual' uk-tooltip="title: test text; cls: small-tooltip" />

然后在全局样式里写对应类的样式：

.small-tooltip {
    --uk-tooltip-font-size: 0.5rem;
    color: yellow;
    background-color: black;
}

注意：0.5rem基于浏览器默认16px根字号计算只有8px，视觉上非常小，调试时可以先设置为12px确认样式生效，再调整到目标尺寸。

内容的提问来源于stack exchange，提问作者RuLee