Как сказано в P.S. предыдущего поста, OPERA по-разному понимает связку position:relative; -> position:absolute; для блочных и строчных элементов.

Вам предлагается, новый вариант всплывающей подсказки, с легкой претензией на универсальность для браузеров: FF (все из семейства Mozilla), OPERA, IE6(7), в других нет возможности проверить, экзотику не стоит брать в расчет.

Собственно говоря, ничего нового, абсолютное позиционтрование для блоков, OPERA, OPERA, как все было прекрасно в предыдущем варианте, увы ...

Тест. Всплывающая подсказка. Наведите курсор мыши на mouseower to comment, находится ниже.

Файл hover.htc для IE 6

<attach for=element event=onmouseover handler=lasto>
<attach for=element event=onmouseout handler=gordi>
<script> 
function lasto(){element.className='hover';}
function gordi(){element.className='';}
</script>

Решены, если не все, то основные проблемы и препятствия данного метода организации всплывающей подсказки, как оказалось в очень кривом браузере OPERA, речь идет не о функционале, а о не адекватной поддержке CSS, чему было посвящено исследование предыдущего поста.

Теперь чуть более подробно, какие шаги необходимо сделать, чтобы с полной отдачей использовать предложенный метод. При наведение курсора мыши Чаще используйте возможности горячих клавиш, этим Вы экономите массу времени. Овладевайте слепой десяти пальцевой печатью на клавиатуре, есть огромное количество клавиатурных тренажеров. Практика и только практика поможет Вам в этом увлекательном процессе;-) на указатель всплывающей подсказки, появляется всплывающий слой несущий ту или иную информацию. В общем случае css/html выглядит приблизительно так:

css

<style type="text/css">
.tp {position:relative;text-indent:0;}
.tp b {
   border-bottom:#90f 1px dotted;
   color:#90f;
   cursor:help;
   font-weight:normal;
}
.tp b span {display:none;}
/*-- для FF, OPERA, IE7 --*/
.tp b:hover {
   border-bottom:red 1px dotted;
   color:red;
}
.tp b:hover span {
   background:lightcyan;
   border:silver 2px outset;
   color:#000;
   display:block;
   padding:7px;
   position:absolute;
   top:2px;
   left:5px;
   z-index:10;
   text-align:left;
   width:250px;
}
</style>

<!--[if IE 6]>
<style type="text/css">
.tp b {behavior:url(hover.htc);}
.tp .hover {
   border-bottom:red 1px dotted;
   color:red;
}
.tp .hover span {
   background:lightcyan;
   border:silver 2px outset;
   color:#000;
   display:block;
   padding:7px;
   position:absolute;
   top:2px;
   left:5px;
   z-index:10;
   text-align:left;
   width:250px;
}
</style>
<![endif]-->

html

<p class="tp" style="z-index:7;">
Просто текст<br>
<b>display:inline-block;<span style="left:130px;">
Это значение генерирует блочный элемент, который обтекается другими
элементами веб-страницы подобно встроенному элементу. Фактически
такой элемент по своему действию похож на встраиваемые элементы
(вроде тега <IMG>). При этом его внутренняя часть форматируется
как блочный элемент, а сам элемент — как встроенный.</span></b> -
еще не много текста.</p><br>

<p class="tp" style="z-index:6;">
Текст - много, много текста
<b>указатель<span style="left:150px;">всплывающий
слой</span></b>продолжение того о чем вы хотите сказать.</p>

Стили заданы по умолчанию, сокращение .tp от tooltips post.
Селектор {свойство1:аргументы;свойство2:аргументы;}

Меняя значения аргументов, вы можете настроить оформление указателя и всплывающего слоя по своему желанию. Позиционирование вплывающей подсказки производится в html, это в основном касается z-index:XX;значение этого аргумента, должно быть меньше для ниже находящегося параграфа или блока, в котором вы размещаете всплывающую подсказку, позволяет избежать просвечивания через всплывающий слой, указателя на всплывающую подсказку, который может оказаться перекрытым в параграфе и left:XXpx; top:XXpx; данными аргументами позиционируется всплывающий слой относительно указателя, что при грамотном применении, позволяет обойтись без JavaScript, отображая всплывающую подсказку в нужное место, избегая попадания оной в не видимую часть для <span>...</span>, есть возможность, внеся не большую коррекцию, улучшить читаемость текста всплывающей подсказки при отключенных стилях. Если, кому-то требуется, через комментарии, выложу описание.

Многие решения на JavaScript, часто используют для всплывающей подсказки "title" это с одной стороны все упрощает, а с другой стороны, нет возможности во всплывающем слое пользоваться ссылкой, в данном случае такая возможность имеетсястоит проверить ;-) ну как?.

Само собой, идеальных решений нет, возможно, кому-то захочеться избавиться от рутинной работы по привязке всплывающего слоя и автоматизировать сей процесс, сотворив для этих целей не большой скриптвсе пожелания по улучшению, а так же всевозможные претензии в комментарии, буду рад, если вы, поделитесь результатами своих исследований.