HTML Комментарии! (ссылка, тег.)

[Cassius]

Здравствуйте, форумчани. Скажите, подскажите можно ли реализовать такое. Что бы при наведении на слово выходил комментарии. В виде окна или тип этого. С текстом, а именно с описанием.
Я далек от этого вот и прошу дайте тег, пните куда нить. Одним словом дайте начало.

Я пишу электронный учебник. На Delphi. Использую Webbrowser. Вот надо там такое реализовать. Чтоб студент при не понятном для него слове, мог мышкой навести на слово и на поле появилось описание.
Думаю реализовать это как выше описано если реально такое. Если нет дайте совет как сделать такое по другому. Менее кропотливым способом так как времени почти нет. Заранее благодарен за любой ответ.

[ZvEr_HaCkEr]

дык, дык и дык

[Cassius]

ZvEr_HaCkEr спасибо!!!!

[Cassius]

возникла такая загвоздка исполбзую JavaS: tooltip.js / jquery.js по твоему совету.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tooltip.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("a#link").easyTooltip({
			useElement: "item"				   
		});
	});
</script>
<style>
#easyTooltip{
	margin:0 10px 1em 0;
	width:250px;
	padding:8px;
	background:#D3B680;
	border:1px solid #e1e1e1;
	line-height:130%;				
	}
#easyTooltip h3{
	margin:0 0 .5em 0;
	font:13px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	}	
#easyTooltip p{
	margin:0 0 .5em 0;
	}		
#easyTooltip img{
		background:#fff;
		padding:1px;
		border:1px solid #e1e1e1;
		float:left;
		margin-right:10px;
		}		
#item{display:none;}
</style>
<script type="text/javascript">
	$(document).ready(function(){	
		$("a#link1").easyTooltip({
			useElement: "item1"				   
		});
	});
</script>

как этот код изменить? чтоб появляющися JS не выходил за пределы webbrowser'a?

[marccella]

Впринцыпе, Можно еще зделать при помощи свойства CSS 'visibility' и псевдо-класса ':hover' (элемент при абсолютном позиционировании), но там тоже возникнет проблема с вылетом контента за пределы окна броузера. Если позиционировать контент относительно окна броузера, то можно избежать эту проблему...

[Cassius]

Сообщение от marccella

Если позиционировать контент относительно окна броузера, то можно избежать эту проблему...

это как, можно подробней?

[Виталий Желтяков]

Хотите чтобы не вылазил, то используйте ezpz_tooltip

[Cassius]

ezpz_tooltip это где использовать ? просто замена Tooltip на ezpz_tooltip ??

[marccella]

Сообщение от Cassius

это как, можно подробней?

Это если абсолютно позиционировать ваши описания относительно к какому нибуть первоначальному тегу, который не имеет определенного размера (width, height) и не находится внутри элемента с определенным размером (скорее html или body, если у body не задана width или height).

Но у этого варианта может возникнуть геморой при маленьком разрешении экрана (800 х 600 нп.) и не стоит на нем особо зацыкливатся. Мудрее зделать это при помощи скриптов. Я просто ответил по теме (HTML и CSS).

[Cassius]

/*
 * 	Easy Tooltip 1.0 - jQuery plugin
 *	written by Alen Grakalic	
 *	http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
(function($) {

	$.fn.easyTooltip = function(options){
	  
		// default configuration properties
		var defaults = {	
			xOffset: 10,		
			yOffset: 25,
			tooltipId: "easyTooltip",
			clickRemove: false,
			content: "",
			useElement: ""
		}; 
			
		var options = $.extend(defaults, options);  
		var content;
				
		this.each(function() {  				
			var title = $(this).attr("title");				
			$(this).hover(function(e){											 							   
				content = (options.content != "") ? options.content : title;
				content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
				$(this).attr("title","");									  				
				if (content != "" && content != undefined){			
					$("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");		
					$("#" + options.tooltipId)
						.css("position","absolute")
						.css("top",(e.pageY - options.yOffset) + "px")
						.css("left",(e.pageX + options.xOffset) + "px")						
						.css("display","none")
						.fadeIn("fast")
				}
			},
			function(){	
				$("#" + options.tooltipId).remove();
				$(this).attr("title",title);
			});	
			$(this).mousemove(function(e){
				$("#" + options.tooltipId)
					.css("top",(e.pageY - options.yOffset) + "px")
					.css("left",(e.pageX + options.xOffset) + "px")					
			});	
			if(options.clickRemove){
				$(this).mousedown(function(e){
					$("#" + options.tooltipId).remove();
					$(this).attr("title",title);
				});				
			}
		});
	  
	};

})(jQuery);

ну а с этим кодом, что можно сделать?