Небольшой скрипт, с помощью которого можно настроить всплывающую подсказку на теге title=”” без дополнительных тегов и разметки.
По сети гуляет много разных скриптов, но большинство из них, либо не работает, либо требует дополнительных тегов. В нашем случае стоит задача поместить весь текст именно в TITLE ссылки и стилизовать его средствами CSS.
HTML разметка
<a href="{link}">
<img src="{image-1}"
alt="{title}"
title="<b>{title}</b><br/><br/>{text limit="1000"}"/>
{title}
</a>Выше показан исходный код шаблона, по которому формируется похожая новость в файле relatednews.tpl, показанная на скриншоте выше. Всплывающая подсказка формируется из заголовка и текста короткой новости и помещается в TITLE картинки
JavaScript
Скачать скрипт tooltip.js и поместить в папку шаблона. В main.tpl между <head></head> добавить следующий код:
<script type="text/javascript" src="{THEME}/js/tooltip.js"></script>
<script>
$(document).ready(function(){
$("a").easyTooltip()
});
$(document).ready(function(){
$("img").easyTooltip()
});
</script>CSS стили
/*Tooltip - всплывающие подсказки*/
#easyTooltip{
max-width: 300px;
padding:10px;
border:1px solid #000;
background:#000;
color: #ccc;
border-radius: 6px;
opacity: 0.8;
font-size: 15px ;
z-index: 9999;
box-shadow: 0px 0px 15px #000;
}
Показывает только заголовок, а краткую новость не хочет почему-то..
{text-limit="xxx"}
где ххх – требуемое количество символов из краткой новости.
Как вариант, в вашей версии движка может не работать такая функция.
Знаю точно, что работает с 9.7, ниже не пробовал!
у меня версия 10.2
Самый первый код в посте я не ставил, потому как не понял куда.
Подскажите пожалуйста , куда его вставить..
Файл похожих новостей в шаблоне: relatednews.tpl
Ставил туда, не заработало, только заголовок показывается.
Спасибо за ответы Вам.
Странно, удалил всё в relatednews.tpl , заголовок все равно показывается. Может быть такое, что еще где-то поправить можно?
Даже не знаю. Я 10.2 не ставил, возможно там разгадка. Раз заголовок выводит, значит скрипт работает правильно.
Скажите как сделать чтоб срабатывало на всех ссылках где есть title а не только где картинки.
Строки выше это инициализация на jQuery. Каждая строка – отдельное правило. Добавляете нужный тег и все должно работать. Пример:
$("a") – есть в коде
$("img") – есть в коде
$("i") – нету
$("b") – нету
и так далее
в дле 13 код вставил не между HEADER а перед закрывающимся BODY и все заработало
Все правильно. Но для данного скрипта не очень критично т.к. он находится в папке сайта и не подгружает ничего извне.
Перед закрывающим актуально ставить внешние скрипты, например jQuery. Тем самым скрипт грузится после загрузки всей страницы и если на внешнем сервере проблемы, на скорость загрузки сайта он будет влиять не так сильно.