<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('okno').style.display='block'"><span>Подсказка</span></a>

<br />

<div id='okno' style='display: none;'>Здесь будет текст Вашего всплывающего окна<div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('okno').style.display = 'none' ">Закрыть</a></div></div>

#okno {

display: none; /* закрываем от показа при загрузке страницы */

position: absolute;

left: 30px; /*смещаем вправо*/

top: -30px; /*вверх*/

z-index: 1; /*возвышаем над другими элементами, на всякий случай*/

border: 1px solid #FFAE00;

border-radius: 12px; /*округляем*/

padding: 10px;

background-color: #ff5a00;

background-image: linear-gradient(top, #ff5a00, #FFAE00); /*градиент (плавный переход цвета) сверху- вниз*/

background-image: -webkit-linear-gradient(top, #ff5a00, #FFAE00);

background-image: -moz-linear-gradient(top, #ff5a00, #FFAE00);

background-image: -o-linear-gradient(top, #ff5a00, #FFAE00);

background-image: -ms-linear-gradient(top, #ff5a00, #FFAE00); /*на всякий случай для каждого арбузера*/

text-align: justify;

font-size: 12px;

font-style: italic;

font-weight: bold;

text-shadow: 1px 0 0 #000; /*тень шрифта*/

width: 420px;

}

/*делаем симпатичный указатель*/

#okno:after {

content: '';

position: absolute;

width: 0;

height: 0;

z-index: 1;

border: 15px solid transparent; /*делаем квадрат прозрачным. Без transparent квадрат будет белым*/

border-top-color: #FFAE00; /*красим верхний треугольник квадрата*/

top: 100%;

left: 10%; /*располагаем со смещением вправо на 10%. Если поставите 50%, то будет посередине*/

margin-left: -15px;

}

<a onmouseover="document.getElementById('okno').style.display = 'block' " onmouseout="document.getElementById('okno').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration:underline;">Подсказка</span></a>