Всплывающие сообщения в прямом эфире

templates/skin/developer-jquery/block.stream_comment.tpl

@@ -4,7 +4,7 @@
 		{assign var="oTopic" value=$oComment->getTarget()}
 		{assign var="oBlog" value=$oTopic->getBlog()}
 		
-		<li>
+		<li class="js-title-comment" title="{$oComment->getText()|strip_tags|truncate:100:'...'}">
 			<a href="{$oUser->getUserWebPath()}"><img src="{$oUser->getProfileAvatarPath(48)}" alt="avatar" class="avatar" /></a>
 			
 			<a href="{$oUser->getUserWebPath()}" class="author">{$oUser->getLogin()}</a> &rarr;

templates/skin/developer-jquery/block.stream_topic.tpl

@@ -3,7 +3,7 @@
 		{assign var="oUser" value=$oTopic->getUser()}							
 		{assign var="oBlog" value=$oTopic->getBlog()}
 		
-		<li>			
+		<li class="js-title-topic" title="{$oTopic->getText()|strip_tags|truncate:150:'...'}">
 			<a href="{$oUser->getUserWebPath()}"><img src="{$oUser->getProfileAvatarPath(48)}" alt="avatar" class="avatar" /></a>
 			
 			<a href="{$oUser->getUserWebPath()}" class="author">{$oUser->getLogin()}</a> &rarr;

templates/skin/developer-jquery/css/infobox.css

@@ -59,4 +59,71 @@
 	width:11px;
 	height:21px;
 	background:url(../images/infobox-standart-arrows.png) no-repeat -66px 0;
+}
+
+
+
+
+
+
+
+.infobox-title {
+	z-index:1000;
+	text-align:left;
+	border:1px solid #c7bf93;
+	border-radius:4px;
+	-moz-border-radius:4px;
+	-webkit-border-radius:4px;
+	padding:6px 8px;
+	min-width:50px;
+	max-width:300px;
+	color:#000;
+	background-color:#fff9c9;
+	/**
+	 * - If you set a background-image, border/padding/background-color will be ingnored.
+	 *   You can set any padding to .tip-inner instead if you need.
+	 * - If you want a tiled background-image and border/padding for the tip,
+	 *   set the background-image to .tip-inner instead.
+	 */
+}
+.infobox-title .tip-inner {
+	font:12px/16px arial,helvetica,sans-serif;
+}
+
+/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
+.infobox-title .tip-arrow-top {
+	margin-top:-6px;
+	margin-left:-5px; /* approx. half the width to center it */
+	top:0;
+	left:50%;
+	width:9px;
+	height:6px;
+	background:url(../images/infobox-title-arrows.gif) no-repeat;
+}
+.infobox-title .tip-arrow-right {
+	margin-top:-4px; /* approx. half the height to center it */
+	margin-left:0;
+	top:50%;
+	left:100%;
+	width:6px;
+	height:9px;
+	background:url(../images/infobox-title-arrows.gif) no-repeat -9px 0;
+}
+.infobox-title .tip-arrow-bottom {
+	margin-top:0;
+	margin-left:-5px; /* approx. half the width to center it */
+	top:100%;
+	left:50%;
+	width:9px;
+	height:6px;
+	background:url(../images/infobox-title-arrows.gif) no-repeat -18px 0;
+}
+.infobox-title .tip-arrow-left {
+	margin-top:-4px; /* approx. half the height to center it */
+	margin-left:-6px;
+	top:50%;
+	left:0;
+	width:6px;
+	height:9px;
+	background:url(../images/infobox-title-arrows.gif) no-repeat -27px 0;
 }

templates/skin/developer-jquery/js/developer-jquery.js

@@ -44,6 +44,18 @@ jQuery(document).ready(function($){
 
 	// Тул-бар топиков
 	ls.toolbar.topic.init();
+
+	// Всплывающие сообщения
+	$('.js-title-comment, .js-title-topic').poshytip({
+		className: 'infobox-title',
+		alignTo: 'target',
+		alignX: 'left',
+		alignY: 'center',
+		offsetX: 5,
+		liveEvents: true,
+		showTimeout: 1500
+	});
+
 	
 	// Хук конца инициализации javascript-составляющих шаблона
 	ls.hook.run('ls_template_init_end',[],window);