how to add tooltip for wordpress button?

sarathi
February 25, 2022
166 views
1 vote
2 Answers

I have tried with plugin its woking fine.
i need without plugin add some tooltip with css.

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

styles:

.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;
}

if using some text contents it works fine.

now i m using buttons here

<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>

if i use span class also didnt work. usual button style also changed. better solution suggest me Thank you

Tags: tooltip wordpress

Answers

check this for button and text

.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>

Your actual code should work (granted you’re fixing class names – your example code has some "deviations" …).

Example 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>

So most likely there are some typos in your html or css.

The main concept is perfectly OK:

tooltip parent element has position:relative
tooltip text gets position: absolute and hidden visibility that’s toggled on hover

Example 2: inlined tooltips

* {
  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>

Should work for any parent element. But you might have more specific css rules inherited by your theme or plugins (… uhm, wordpress). So you will need to inspect your computed styles in dev tools if you encounter any issues.

Please signup or login to give your own answer.

Click here to cancel reply.