Question

是否可以设置由以下工具创建的按钮的工具提示样式：

<button title="Hi!">Button</button>

我想更改字体系列。

谢谢。

Answer 1

是的，您可以更改工具提示标题。但是您需要创建自己的类而不是TITLE“”，请参见此处的示例：

请参见HTML和CSS代码：

<!DOCTYPE html>
<html>

<body>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

{{1}}

运行，然后您会看到工具提示标题将被更改。

Answer 2

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

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

我认为自定义工具提示的最佳方法是使用CSS解决方案，该解决方案使用.tooltip类以及::before和::after伪元素

一个简单的示例可能看起来像这样：

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

Answer 3

您可以使用伪类创建自定义工具提示。

    button { margin: 10px; }
    button:hover:after { 
        content: "Hi"; 
        font-family: Arial;
        position: absolute;
        top: 0;
        width: 20px;
        height: 1.25rem;   
        background-color: gray;
        color: white;
    }

<button>Button</button>

样式按钮工具提示

3 个答案: