А так можно?
<section>
<div style="width: 60%;">content №1</div>
<div style="width: 30%;">content №1</div>
<button class="helptip" title="Нажмите для того, чтобы получить справку">?</button>
<span title="Нажмите, чтобы закрыть справку">Справка №1.</span>
</section>
<section>
<div style="width: 60%;">content №2</div>
<div style="width: 30%;">content №2</div>
<button class="helptip" title="Нажмите для того, чтобы получить справку">?</button>
<span title="Нажмите, чтобы закрыть справку">Справка №2.</span>
</section>
<style>
section {
display: flex;
position: relative;
margin: 1em 0;
}
.helptip {
padding: 1px 7px;
margin: 0;
margin-left: auto;
background: #eee;
border: 1px solid #ddd;
cursor: pointer;
border-radius: 5px;
}
.helptip:hover {
background: #fff;
}
.helptip + span {
padding: 8px;
margin: 5px;
background: #FBFBF9;
border-radius: 5px;
border: 1px solid #CBCBBD;
position: absolute;
display: none;
z-index: 99; /* Важно!
Всплывающие подсказки всегда выше
нижеследующих элементов */
right: 0;
min-width: 300px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
cursor: default;
}
.helptip:focus + span {
display: initial;
}
</style>