Доброго времени. Подскажите каким образом реализовать "всплывающюю подсказку" но чтоб вместо тоекста там вряд отображались 3 картинки.

Чтото типа:



Пути к картинкам будут браться из БД как и сами строки

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза

Что значит "всплывающая подсказка"?
Если речь об теге <alt>, то никак, он изначально текстовый.
Если же это эмуляция, с всплывающим дивом, то это всего лишь див, который можно наполнить любым содержимым, в том числе и изображениями, обычными методами.
В общем, вопрос уточни, дальше будем курить.

_____________
[продано копирайтерам]

Как уже было верно замечено, используй отдельный ДИВ, в который помести всё, что хочешь. И показывай его по событию mouseenter. Надо только будет насчет места определиться, где показывать, в зависимости от положения текста на экране. Чтобы не получилось так, что ты будешь где-нибуд вне поля видимости юзера отображать эту подсказку.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

знаю что не хорошо целиком давать ответ , но все же

<style type="text/css">
	#help {
		display: block;
		display: none;
		position: absolute;
		z-index:100;
		padding:5px;
		margin:5px;
		border:1px solid black;
		background-color:#f3f3f3;
	}
	.show_help {
		text-decoration:underline
	}
</style>
<div id="help"></div>
Вот у нас какой-то текст, <span class="show_help" help="<img src='http://picsdesktop.net/Springtime/560x420/PicsDesktop.net_1.jpg' alt='картинка'>" style="cursor:pointer;cursor:hand;">который</span> содержит ссылку


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></SCRIPT>
<script>
$(document).ready(function(){
	// Подсказка
	$(".show_help").on({
		mouseenter : function(e){
				x_y(e);
				var text = $(this).attr("help");
				$('#help').show();
				$('#help').html("").append(text);
			},
		mouseleave: function(){
				$('#help').hide();
			}
	});
});
// открыть новое окно
function x_y(e){
	floatTipStyle = document.getElementById('help').style;

	// Для браузера IE
	if (document.all) {
	  x = event.x + document.body.scrollLeft;
	  y = event.y + document.body.scrollTop;

	// Для остальных браузеров
	} else {
	  x = e.pageX; // Координата X курсора
	  y = e.pageY; // Координата Y курсора
	}

	// Показывать слой справа от курсора
	if ((x+320) < $(window).width()) {
	  floatTipStyle.left = x + 30 + 'px';

	// Показывать слой слева от курсора
	} else {
	  floatTipStyle.left = x - 250 + 'px';
	}
	// Положение от верхнего края окна браузера
	var scrollHeight = document.documentElement.scrollHeight;
	var clientHeight = document.documentElement.clientHeight;
	scrollHeight = Math.max(scrollHeight, clientHeight);

	if ((y + 100) < scrollHeight) {
			floatTipStyle.top = y + 'px';
	} else {
			floatTipStyle.top = y - 100 + 'px';
	}
}
</script>

Если кто подскажет, как это написать на чистом JS буду очень благодарен.