Показать сообщение отдельно
  #2 (permalink)  
Старый 06.02.2019, 12:22
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

А так можно?
<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>
Ответить с цитированием