У вас кино-сайт, и у вас мало места, нужно много чего впихнуть и было при этом компактно и красиво?! Тогда с помощью данного скрипта вы сможете вывести информацию о фильме при наведение на одном css, в окошко добавляйте свое или используйте то, что уже написано если вам подойдет. Так же можно изменить цвет появления подсказки, что бы подошло под любой дизайн, вообщем код очень простой и теперь приступим к установке
Установка: 1) Панель управления ---> Управление дизайном --->
Нужный модуль --->
В вид материалов, и вставляем куда нужно данный html-код:
Код
<div class="MiniPostDopInfo">
<a href="" class="pull-left popupinfo">Тут текст или иконка</a>
<div class="MiniPostDopInfoIcon">
<div class="MiniPostDopInfoForm">
<div class="b-pp_content_arrow_l"></div>
<div class="b-pp_content_arrow_r"></div>
<div class="MiniPostDopInfoContent">
<div class="DopInfoContentTitle">
<a href="$ENTRY_URL$">$TITLE$ </a>
</div>
<div class="DopInfoContentEx">
Режиссёр: $AUTHOR_NAME$
<div class="DopInfoContentRating"></div>
Премьера (мир): $OTHER2$
<div class="DopInfoContentRating"></div>
Опубликовано: $DATE$ в $TIME$
<div class="DopInfoContentRating"></div>
</div>
</div>
</div>
</div>
</div>
2) Панель управления ---> Управление дизайном --->
Таблица стилей (CSS), и всамый низ вставляем данный css-код:
Код
.MiniPostAllForm{width:177px;height:400px;}
.MiniPostAllForm{width:177px;height:400px;}
.MiniPostAllFormDop{float:left;margin:0 10px;position:relative;}
.MiniPost{border:1px solid #F0F0F0;border-radius:5px;overflow:hidden;margin-bottom:3px;}
.MiniPost .MiniPostPoster img{display:block;width:177px;height:263px;}
.MiniPostName{margin-bottom:3px;}
.MiniPostName a{color:#31669B;text-decoration:none;font-size:13px;font-weight:normal;line-height:16px;}
.MiniPostName a:hover{text-decoration:underline;}
.MiniPostInfo{margin-bottom:3px;line-height:14px;}
.MiniPostInfo a{text-decoration:none;line-height:14px;font-size:11px;color:#848484;}
.MiniPostInfo a:hover{text-decoration:underline;}
.MiniPostAllForm .MiniPostDopInfo{display:none;background:rgba(0,146,219,1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:8px 0 0 140px;position:absolute;height:27px;width:27px;}
.MiniPostAllForm:hover .MiniPostDopInfo{display:block;}
.MiniPostDopInfo:hover{background:rgba(0, 0, 0, 0.8);}
.MiniPostDopInfo .MiniPostDopInfoForm{border-radius:3px;display:none;position:absolute;padding:5px;background:rgba(0, 0, 0, 0.35);margin:29px 0px 0px -60px;width:400px;z-index:9999999999;}
.MiniPostDopInfo:hover .MiniPostDopInfoForm{display:block;}
.MiniPostDopInfo:hover .revers{margin:-9px 0px 0px -511px !important;}
.revers .b-pp_content_arrow_l{background:#f60;display:none !important;}
.b-pp_content_arrow_r{display:none;}
.MiniPostDopInfoContent{background:rgba(255,255,255,1);padding:20px 20px 0px 20px;}
.MiniPostDopInfoContent > a{float:right;width:116px;height:26px;overflow:hidden;}
.MiniPostDopInfoContent > a img{margin: 0 0;}
.MiniPostDopInfoContent > a img:hover{margin:-26px 0 0;}
.ModalWindowsClickForm{display:none;}
.MiniPostAllForm:hover .ModalWindowsClickForm{display:block;cursor:pointer;float:right;position:relative;margin:-226px 8px 0 0;width:27px;height:27px;background:rgba(0,146,219,1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.MiniPostAllForm .ModalWindowsClickForm:hover{background:rgba(0, 0, 0, 0.5);}
.kp_imdb{width:454px;height:42px;}
.kp_imdb_full{width:225px;height:85px;margin:0 37px 0px;}
.in_kp_imdb{width:225px;height:41px;padding:0px 0px;float:left;}
.in_name{width:225px;height:15px;margin:22px 0 0 0;text-align:center;}
.DopInfoContentTitle{display:block;margin:0 10px 8px 0;line-height:15px;font-size:16px;font-weight:normal;color:#363636;}
.DopInfoContentEx {margin-bottom:8px;color:#959595;}
.DopInfoContentEx a{color:#959595;}
.DopInfoContentText{margin-bottom:8px;line-height:18px;font-size:12px;color:#292929;}
.DopInfoContentRating{padding-top:8px;border-top:4px solid #F2F2F2;color:#292929;}
.RelatedFormTitle{margin:30px 0 6px 0;padding:0;font-size:16px;font-weight:bold;width:688px;float:right;}
.MiniPostAllFormRelated{width:142px;height:250px;float:right;margin:0 30px 0 0;}
.MiniPostRelated{border:1px solid #F0F0F0;border-radius:5px;overflow:hidden;margin-bottom:3px;}
.MiniPostRelated .MiniPostPosterRelated img{display:block;width:140px;height:198px;}
.MiniPostNameRelated{margin-bottom:3px;}
.MiniPostNameRelated a{color:#31669B;text-decoration:none;font-size:13px;font-weight:normal;line-height:16px;}
.MiniPostNameRelated a:hover{text-decoration:underline;}
.ContentShowfull{padding:0 !important;width:100% !important;}
.popupinfo {
position: absolute;
}
готово!