如何修改表格内tooltip提示框字体大小（样式不生效）

• 类名匹配错误：你使用的是Bootstrap内置tooltip组件，组件动态渲染的提示框文本节点类名为.tooltip-inner，并非你代码中写的.tooltiptext，选择器无法命中目标元素，样式自然不会生效。
• 样式权重不足：Bootstrap组件自带默认样式，普通权重的自定义样式会被框架默认样式覆盖。

删除你原有代码里的.tooltip .tooltiptext样式块，替换为以下代码即可：

.tooltip .tooltip-inner {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 20px !important;
  z-index: 1;
}

如果不想使用!important强制提升优先级，可以将选择器改为body .tooltip .tooltip-inner，只要选择器权重高于Bootstrap默认样式选择器，就能正常覆盖。

注意：Bootstrap tooltip默认会被动态插入到<body>标签末尾，并不嵌套在你绑定tooltip属性的表格元素内部，不要将tooltip样式写在表格相关选择器的嵌套规则内，直接全局匹配对应类名即可。你写的tooltip初始化JS代码没有问题，无需修改。

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