Никак.
Максимум, можете вывести так: <nav class="dropdown menu" data-dropdown-menu="">
Но зачем?
И doctype тут не при чем.
Реализация, такая как вы хотите, работает с атрибутами типа boolean, а data-атрибуты таковыми не являются - они созданы для хранения какой-либо информации.
Да, всё верно - если в разметке элементы есть, пускай и скрытые, то на текущую сессию изображения всё равно выкачиваются. При использовании ссылок на них заново выкачиваться изображения не будут.
Для элемента #tooltip одним из предков является элемент с классами "section_wrapper mcb-section-inner", а для .section_wrapper у вас задано свойство postion: relative, вот и получается, что он позиционируется относительно него.
Положите #tooltip в корень body или так, чтобы ни один предок не имел значения свойства position отличного от static (дефолтное, если не указывать).
Могу вам посоветовать использовать вот эту технологию - htmlbook.ru/content/razrezanie-i-skleyka-izobrazheniy
Оформляйте всё, кроме текста, как изображение. Для текста выделяйте отдельные ячейки, если он необходим как текст.
Странно, но никто не предложил сделать в виде блока - прямоугольника с двумя псевдо-элементами - треугольниками сверху и снизу. Подойдёт, если высота картинки не больше высоты грани шестиугольника. cssdeck.com/labs/quqilh4i