how to add tooltip for wordpress button?-CodePudding

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

<div >Parent text
 <span >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 >
 <a  >
 <span >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

CodePudding user response：

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 >Parent text
 <span >Tooltip text here!</span>
</div><br><br>
<div >
 <a  >
 <span >Tooltip Button</span>
</a><span >Tooltip text here for button!</span></div>

CodePudding user response：

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 >
    Button Text (Link)
    <span >Tooltip text</span>
  </a>
</p>

<p>
  <button >
    Button Text (Button)
    <span >Tooltip text</span>
  </button>
</p>

<p>
  <button >
    Button image tooltip
    <span ><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 >
<button >Test button
 <span >Tooltip text here!</span>
</button>

<p>Lorem ipsum dolor sit amet, <span >consectetuer adipiscing <span >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 >image <span ><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.