Как добавить подсказку к кнопки?

Question

Я хочу чтобы, при наведении на кнопку, справа появлялась подсказка.

Как это сделать при помощи css ?

.shop-text button {
  position: relative;
  display: block;
  text-align: center;
  margin: 0 auto;
  margin-top: 6px;
  width: 150px;
  height: 40px;
  background-color: fuchsia;
  border: none;
  border-radius: 30px;
  border: 1px solid black;
  color: white;
  font-size: 1.2em;
  font-weight: 900;
  transition: .3s;
}

.l1 {
  color: #000;
  position: absolute;
  opacity: 1;
  transition: .3s;
}

<div class="byti">
  <button id="button-box-click-lvl-1">Клик +1</button>
  <span class="l1">+1клик</span>
</div>
<div class="byti">
  <button id="button-box-click-lvl-2">Клик +2</button>
  <span class="l2">+2клик</span>
</div>
<div class="byti">
  <button id="button-box-click-lvl-3">Клик +3</button>
  <span class="l3">+3клик</span>
</div>
<div class="byti">
  <button id="button-box-click-lvl-4">Клик +4</button>
  <span class="l4">+4клик</span>
</div>
<div class="byti">
  <button id="button-box-click-lvl-5">Клик +5</button>
  <span class="l5">+5клик</span>
</div>

Answer 1

Не совсем понял, что нужно но может подойти атрибут title.

<button id="button-box-click-lvl-1" title="+1клик">Клик +1</button>

Если хотите чтобы появлялся и исчезал span, то уже с js

Answer 2

что-то такое что-ли?

.inner {
  border: 1px solid #e0e0e0;
  background-color: #f0f0f0;  
  padding: .5rem 2rem;  
}
.tooltip {
  display: none;
}

.wrapper:hover .tooltip {  
  display: inline;
  margin-left: .5rem;
  background-color: red;
  padding: .2rem .5rem;
  color: white;
}

<span class="wrapper" >
  <span class="inner">hey!</span>
  <span class="tooltip">wow!</span>
</span>

БЛОГ НА HUSL

Как добавить подсказку к кнопки?

Ответы (2 шт):