Как обернуть кнопку в tooltip?

Question

[Андрей]

Кнопка "применить" отображается рядом с последним выбранным чекбоксом. т.е. нажал чекбокс - появилась кнопка рядом (остальные кнопка исчезли, а чекбоксы остались)

Нужно оформить эту кнопку как tooltip. Я обернул кнопку в <span class="tooltip">.
Получился вот такой: https://jsfiddle.net/j1wxwjfb/3/.
Но получается, что кнопка не привязана к span, они появляются отдельно друг от друга. а tooltip должен быть вокруг кнопки

Я имею ввиду такой tooltip https://www.w3schools.com/cSS/css_tooltip.asp

Код (без моих танцев с бубном) выглядит следующим образом: https://jsfiddle.net/j1wxwjfb/4/

Как обернуть кнопку в tooltip?

Answer 1

[Виктор Янышев]

По мне так намёк тут https://www.w3schools.com/cSS/css_tooltip.asp в том что:

.tooltip:hover .tooltiptext {
....
}

Но не обязательно, можно и:

.tooltip:hover + .tooltiptext {
....
}

Ещё вариант https://www.w3schools.com/cSS/tryit.asp?filename=t... всё дело в position:relative кнопки и position:absolut`е от кнопки и использования display, overflow, opacity