html - 样式按钮工具提示

Question

<分区>

Answer 1

因此您不能直接更改工具提示使用的样式，但有创建自定义工具提示的选项。

自定义工具提示似乎遵循一些基本方法 - JS库 - 使用嵌套跨度属性的 CSS - 使用自定义类或属性的 CSS

我觉得自定义工具提示的最佳方法是使用 .tooltip 类和 ::before 和 ::after< 的 CSS 解决方案 伪元素

一个简单的例子可能看起来像这样:

HTML

<button class="tooltip" data-title="Hi!">Button</button>

CSS

.tooltip {
   position: relative;
}
.tooltip::before {
   background-color: white;
   border: 1px solid #888;
   border-radius: 2px;
   color: #444;
   content: attr(data-title);
   display: none;
   font-family: sans-serif;
   font-size: 14px;
   padding: 2px 5px;
   position: absolute;
   top: 20px;
   left: 5px;
   z-index: 1;
}
.tooltip:hover::before {
   display: block;
}

其他一些不错的链接:

一个很好的指南:https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346

W3 的嵌套跨度示例:https://www.w3schools.com/css/css_tooltip.asp

一个简单的例子:http://jsfiddle.net/hari_shanx/1rbnLbbx/

动画工具提示:https://codepen.io/neogomo/pen/BjqJzr