如何为wordpress按钮添加工具提示

Question

我试过插件，它非常好。我需要在没有插件的情况下添加一些css工具提示。

<div class="tooltip-text">Parent text
<span class="tooltiptext">Tooltip text here!</span>
</div>

样式：

.tooltip-box {
position: relative;
display: inline-block;
}
.tooltip-box .tooltip-text {
visibility: hidden;
width: 100px;
background-color: black;
color: #fff;
text-align: center;
padding: 6px 0;
position: absolute;
z-index: 1;
}
.tooltip-box:hover .tooltip-text {
visibility: visible;
}

如果使用一些文本内容，效果会很好。

现在我在这里使用按钮

<div class="kt-btn-wrap kt-btn-wrap-2">
<a class="kt-button button kt-btn-2-action kt-btn-size-custom kt-btn-style-basic kt- 
btn-svg-show-always kt-btn-has-text-true kt-btn-has-svg-false" >
<span class="kt-btn-inner-text">Tooltip Button</span>
</a></div></div>

如果我使用span类也不起作用。通常的按钮样式也发生了变化。更好的解决方案建议我谢谢

Answer 1

检查按钮和文本

.tooltip-text {
color:#000;
text-align: center;
padding: 6px 0;
position: absolute;
z-index: 1;
}
.tooltip-text .tooltiptext,  .kt-btn-wrap  .tooltiptext{visibility:hidden;}
.tooltip-text:hover .tooltiptext, 
.kt-btn-wrap:hover span.tooltiptext{
visibility: visible;background-color: black;color:#fff;width:100%;
}

<div class="tooltip-text">Parent text
<span class="tooltiptext">Tooltip text here!</span>
</div><br><br>
<div class="kt-btn-wrap kt-btn-wrap-2">
<a class="kt-button button kt-btn-2-action kt-btn-size-custom kt-btn-style-basic kt- 
btn-svg-show-always kt-btn-has-text-true kt-btn-has-svg-false" >
<span class="kt-btn-inner-text">Tooltip Button</span>
</a><span class="tooltiptext">Tooltip text here for button!</span></div>

Answer 2

您的实际代码应该可以工作(假设您正在修复类名——您的示例代码有一些"偏差"…(

示例1

.kt-button {
position: relative;
display: inline-block;
}
.kt-btn-inline {
border: none;
appearance: none;
background-color: transparent;
padding: 0;
font-family: inherit;
font-size: inherit;
}
.kt-btn-inner-text,
.kt-btn-inner {
visibility: hidden;
width: 100px;
color: #fff;
text-align: center;
padding: 6px 0;
position: absolute;
z-index: 1;
}
.kt-btn-inner-text {
background-color: black;
color: #fff;
}
.kt-button:hover .kt-btn-inner {
visibility: visible;
}

<p>
<a class="kt-button button kt-btn-2-action kt-btn-size-custom kt-btn-style-basic kt- 
btn-svg-show-always kt-btn-has-text-true kt-btn-has-svg-false">
Button Text (Link)
<span class="kt-btn-inner kt-btn-inner-text">Tooltip text</span>
</a>
</p>
<p>
<button class="kt-button kt-btn-inline button kt-btn-2-action kt-btn-size-custom kt-btn-style-basic kt- 
btn-svg-show-always kt-btn-has-text-true kt-btn-has-svg-false">
Button Text (Button)
<span class="kt-btn-inner kt-btn-inner-text">Tooltip text</span>
</button>
</p>
<p>
<button class="kt-button kt-btn-inline button kt-btn-2-action kt-btn-size-custom kt-btn-style-basic kt- 
btn-svg-show-always kt-btn-has-text-true kt-btn-has-svg-false">
Button image tooltip
<span class="kt-btn-inner"><img width="200" height="300" src="http://placekitten.com/g/200/300"></span>
</button>
</p>

因此，很可能在你的html或css中有一些拼写错误。

主要概念完全可以：

• 工具提示父元素具有position:relative
• 工具提示文本获得position: absolute和悬停时切换的隐藏可见性

示例2：内联工具提示

* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", sans-serif;
}
:root {
--border-radius: 0.3em;
--bg-color: rgba(0, 0, 0, 0.7);
--padding: 0.3em;
}
button {
appearance: none;
border: 1px solid #ccc;
padding: 0.3em;
font-size: 2em;
}
.layout {
width: 50%;
margin: 0 auto;
}
.tooltip {
position: relative;
}
span.tooltip {
font-weight: bold;
}
.tooltip-content:before {
content: "";
display: inline-block;
position: absolute;
border: var(--padding) solid transparent;
border-bottom-color: var(--bg-color);
top: calc((var(--padding) * 2 * -1));
left: 50%;
margin-left: calc(var(--padding) / 2 * -1);
border-radius: 0;
}
.tooltip-content {
position: absolute;
top: calc(100% - (var(--padding) * 2));
left: 50%;
z-index: 1;
visibility: hidden;
opacity: 0;
margin-top: calc(var(--padding) * 3);
transform: translateX(-50%);
display: block;
background-color: var(--bg-color);
width: calc(100% + var(--padding));
width: 100%;
min-width: 8em;
color: #fff;
text-align: center;
padding: var(--padding);
padding-top: calc(var(--padding) / 2);
border-radius: var(--border-radius);
transition: 0.3s;
font-size: 1rem;
line-height: 1.2rem;
vertical-align: baseline;
font-weight: normal;
}
.tooltip:hover .tooltip-content {
visibility: visible;
opacity: 1;
}
.tooltip-content-img {
padding: 0!important;
}

<div class="layout">
<button class="tooltip">Test button
<span class="tooltip-content">Tooltip text here!</span>
</button>
<p>Lorem ipsum dolor sit amet, <span class="tooltip">consectetuer adipiscing <span class="tooltip-content">Tooltip text here!</span></span> elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, <span class="tooltip">image <span class="tooltip-content tooltip-content-img"><img  src="http://placekitten.com/g/200/300"></span></span> pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>
</div>

应适用于任何父元素。但是您的主题或插件可能继承了更具体的css规则(…嗯，wordpress(。因此，如果遇到任何问题，您需要在开发工具中检查您的计算样式。