Как сделать всплывающую подсказку на html css чтобы открывалась в этом же окне со своим текстом

Используя только HTML и CSS можно сделать всплывающую подсказку в которую можно поместить свой текст и картинки и это всплывающее окно откроется без перезагрузки странички.

Стили для подсказки поместите либо в head либо в файл стилей:

<style type="text/css">
<!--
.dlink {
color: #0000FF; /* цвет ссылки */
font-weight: bold; /* текст ссылки жирный */
font-family: Verdana, Arial, Helvetica, sans-serif; /* шрифт ссылки */
font-size: 16px; /* размер шрифта ссылки */
}
#wind {
position: absolute;
width: 450px; /* ширина всплывающего окна */
left: 32%; /* отступ от левого края экрана */
top: 100px; /* отступ с верху экрана */
border:solid #A0A050 3px; /* цвет и толщина рамки окна*/
display: none;
z-index: 10;
overflow: hidden;
background-color:#ffffff; /* цвет фона внутри окна, стоит белый */
color:#000000; /* цвет текста внутри окна, стоит чёрный */
text-align:center; /* выравнивает весь текст в окне по центру */
padding:5px;
}
-->
</style>

И сам код подсказки:

<div><a href="#" title="pop-up окно" class="dlink" onclick="document.getElementById('wind').style.display='block'; return false;">Открыть подсказку</a></div>
<div id="wind">
<div align="center">
<table cellspacing="0" align="right">
<tr><td style="padding: 0 3 0 3; background-color:red;

/* цвет кнопки закрыть red - можете вставить свой */

font-family: Verdana; font-size: 10pt; color: #ffffff; font-weight: bold;" onclick="document.getElementById('wind').style.display='none'; return false;" onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'">X</td>

</tr>
</table>
В этом месте сама подсказка, можно писать любой текст и html теги.
</div>
</div>