如何为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 class 也没有用。通常的按钮样式也发生了变化。更好的解决方案建议我谢谢

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

您的实际代码应该可以工作（前提是您正在修复 class 名称 – 您的示例代码有一些“偏差”...）。

示例 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 中有一些拼写错误。

主要概念完全OK：

tooltip 父元素有 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）继承。因此，如果您遇到任何问题，您需要在开发工具中检查您的计算样式。

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

how to add tooltip for wordpress button?

wordpress

tooltip

示例 1

示例 2：内联工具提示