Смотрим пример:
http://funfotos.ru/3433.html
В текст меняем на свой!
[code]<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]-->
<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>[/code]
