Показ всплывающей подсказки в div
 

Использую готовый скрипт для подсказок. В таблице без проблем работает вот в таком виде:

Но мне нужно это все на дивах сверстать. Пробую так:
Но при нажатии на кнопку, span'a справки не видно, т.к. он внутри div'a. z-index прописан в CSS. Помогите поправить верстку!
Как реализована справка (где то скачал):

<style type="text/css">
.helptip {
    float:right;
    padding: 1px 7px;
    margin: 0px;
    background: #eee;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
    position: relative; /* Важно!
    Размещать абсолютное позиционирование внутри
    относительно данного тега */
    width: auto;
}
.helptip:hover {
    background: #fff;
}
.helptip div{
    padding: 8px;
    margin: 5px;
    background: #FBFBF9;
    border-radius: 5px;
    border: 1px solid #CBCBBD;
    position: absolute; /* Важно!
    Абсолютное позиционирование */
    display: none; /* Важно! Скрыть */
    left: -150px;
    bottom: 15px;
    z-index: 99; /* Важно!
    Всплывающие подсказки всегда выше
    нижеследующих элементов */
    min-width: 300px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    cursor: default;
}
.helptip span {
    padding: 8px;
    margin: 5px;
    background: #FBFBF9;
    border-radius: 5px;
    border: 1px solid #CBCBBD;
    position: absolute; /* Важно!
    Абсолютное позиционирование */
    display: none; /* Важно! Скрыть */
    left: -400px;
    bottom: 15px;
    z-index: 99; /* Важно!
    Всплывающие подсказки всегда выше
    нижеследующих элементов */
    min-width: 400px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    cursor: default;
}
.helptip div:hover,
.helptip span:hover {
    background: #fff;
}
.box {
  display: flex;
}
</style>
<script>
function helptip(t) {
    // Разрешаем закрытие подсказок
    // Создаем постоянную переменную этой функции для этих целей
    // Условимся: если ноль, то можно закрывать, а если единица, то нельзя
    helptip.v = 0;
    // Берем последний дочерний тег
    var b = t.children[(t.children.length-1)];
    // Если открыт, то закрываем
    if (b.style.display=="block") helptipx();
    else {
        // Закрываем все
        helptipx();
        // Открываем текущий
        b.style.display = "block";
        // Запрещаем закрытие подсказки вызванного последующими событиями
        helptip.v = 1;
    }
}
// Функция закрывает все подсказки
function helptipx() {
    // Если было нажатие для открытия подсказки, то закрывать нельзя
    // Поэтому проверяем:
    if (helptip.v==1) {
        // Разрешаем закрытие в будущем
        helptip.v = 0;
        // И выходим
        return;
    }
    // Выбираем все теги с классом .helptip
    var s = document.querySelectorAll(".helptip");
    // и перебираем их циклом
    for (var i=0; i < s.length; i++) {
        // Скрываем последний дочерний тег
        s[i].children[(s[i].children.length-1)].style.display = "none";
    }
}
</script>
<div>
    <div style="width: 100%;">
        <div style="float: left; width: 60%; height: 30px;">content</div>
        <div style="float: left; width: 30%; height: 30px;">content</div>
        <div style="float: right; width: 10%; height: 30px;"><div class="helptip" onclick="helptip(this)" title="Нажмите для того, чтобы получить справку" style="display: inline-block;"><strong>?</strong> <span title="Нажмите, чтобы закрыть справку">Справка.</span></div></div>
    </div>
</div> 
<p><strong>А в таблице все работает</strong></p>
<table width=100%>
  <tbody>
   	<tr>
             <td width="60%">content</td>
             <td width="30%">content</td>
             <td width="10%"><div class="helptip" onclick="helptip(this)" title="Нажмите для того, чтобы получить справку" style="display: inline-block;"><strong>?</strong> <span title="Нажмите, чтобы закрыть справку">Справка.</span></div></div></td>
        </tr>
 </tbody>
</table>

А так можно?

<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>

Спасибо! Но этот вариант оставлю как последний случай. <section> IE8 не видит (в том числе и встроенный браузер NetBeans). А я чуть ли после каждой строки запускаю проект, опыта маловато...
P.S. Другие JS подсказки смотрел, не работают они в диве. А общий блок для строки мне обязательно нужен, т.к. некоторые строки необходимо скрывать/показывать. Может другую логику верстки подскажете?

Ты пример тестовый сделай. А то какие-то куски раздельные выкладываешь...

Разобрался с оформлением тестового примера, он в первом посте.

Так на 100 строке написано, что нужно скрывать overflow: hidden;, уберите это и оно будет как в таблице!

Для этой музейной ценности нужно указать в <head> следующее...

<script>document.createElement("section");</script>
<style>
section { display: block; }
</style>

Спасибо. Меня подвело копирование чужого кода и невнимательность. Подскажите, нужно чтобы последний div был фиксированным, а первые два - резиновыми. Вот такой способ нормальный (про calc в IE8 знаю)?

<div style="width: 100%;">
        <div style="float: left; width:calc(65% - 15px); height: 30px;">content</div>
        <div style="float: left; width:calc(5% - 15px); height: 30px;">content</div>
        <div style="float: right; width: 15px; height: 30px;"><strong>?</strong></div>
</div>

Ты описываешь стандартное поведение таблицы из 3-х колонок... ;)

Да, но проще через JS скрыть/показать div чем строку в таблице.

Отнюдь...

<style type='text/css'>
.off {
	display: none;
}
</style>
<table>
<tr>
	<td>0</td>
</tr>
<tr class='off'>
	<td>1</td>
</tr>
<tr>
	<td>2</td>
</tr>
</table>

Дешево и кроссбраузерно... ;)

Я показал в посте №2, как такое сделать! Ах да, не работает в IE8, немного исправил!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<!--[if IE 8]>
	<script>document.createElement("section");</script>
	<![endif]-->
</head>
<body>
<section>
	<div>content №1</div>
	<div>content №1</div>
	<button class="helptip" title="Нажмите для того, чтобы получить справку">?</button>
	<span title="Нажмите, чтобы закрыть справку">Справка №1.</span>
</section>
<section>
	<div>content №2</div>
	<div>content №2</div>
	<button class="helptip" title="Нажмите для того, чтобы получить справку">?</button>
	<span title="Нажмите, чтобы закрыть справку">Справка №2.</span>
</section>

<style>
	
section {
	display: table;
	table-layout: auto;
	width: 100%;
	position: relative;
	margin: 1em 0;
}
	
section > div {
	display: table-cell;
}
	
section > div {
	width: 60%;
}

section > div + div {
	width: 40%;
}
	
.helptip {
    padding: 1px 7px;
    margin: 0;
	margin-left: auto;
    background: #eee;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
	margin-left: auto;
	text-align: right;
}
.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;
	top: 0;
    min-width: 300px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    cursor: default;
}

.focus span,
.helptip:focus + span {
	display: inline-block;
}
</style>
<!--[if IE 8]>
<script>
(function() {
    var buttons = document.querySelectorAll(".helptip");
    
    for(var i = 0; i < buttons.length; i++){
        var button = buttons[i];

        button.attachEvent("onblur", function() {
            event.srcElement.parentNode.className = event.srcElement.parentNode.className.replace(" focus", "");
        });
        
        button.attachEvent("onfocus", function() {
            event.srcElement.parentNode.className += " focus";
        });
    };  
})();
</script>
<![endif]-->
</body>
</html>

P. S. Не нужно на каждом элементе отдельно прописывать стили, когда у вас станет много разделов, вы будете у каждого раздела отдельно стили менять, когда потребуется? Используйте <button> там где нужна кнопка, а не <div>, на котором не возможно сфокусироваться! (Конечно можно добавить tabindex="0", но вам не нужна лишняя писанина!)

ksa, теперь голову ломать на каком варианте остановиться!

Malleys спасибо, буду разбираться! Я показывал тестовые примеры, потом в CSS все оформлю.