Фильтр всплывающая подсказка для статей

1358
Разработан фильтр всплывающая подсказка, полностью построен на CSS и 2-х изображений
В редакторе выводиться достаточно просто {показ}пишем текст | пишем подсказку {/показ}
Сделано два варианта
1. Показывает подсказку всем пользователям
2. Показывает только зарегистрирован пользователям, если пользователь не авторизованный, вместо подсказки появляться надпись Скрытый текст виден только зарегистрированным пользователям.

Пример работы фильтра



1. Нам необходимо убрать отображение только в области внутри элемента при выводе статьи.

Открываем файл com_content_read.tpl из папки /templates/_default_/components/
примерно строка 42, находим код
Код PHP:
<div class="con_text" style="overflow:hidden">
убираем отсюда style="overflow:hidden", должно получиться следующее
Код PHP:
<div class="con_text">

2. Добавляем в БД новый фильтр

Делаем следующий запрос

Код PHP:
INSERT INTO `cms_filters` (`id`, `title`, `description`, `link`, `published`) VALUES('', 'Всплывающая подсказка', 'Всплывающая подсказка. {показ}текст | подсказка{/показ}', 'f_hidetip', 1);
С базой закончили

3. Теперь нам необходимо добавить стили

Код PHP:
/*----------  hidetip -----------*/

span.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF; /*текст до наведения курсора*/
    text-decoration:none; text-decoration:none; border-bottom: 1px dashed #3CA3FF; cursor: pointer;

}
span.tt span{ display: none; }
a.tt span a{ display: none; }


span.tt:hover{ z-index:25; color: #aaaaff; background:; text-decoration:none; border-bottom: 1px dashed #aaaaff;} /*текст при наведении курсора*/

/*текст самой подсказки*/
span.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
}
/*текст подсказки с ссылкой*/
span.tt:hover span.tooltip a{ color: #3CA3FF}
span.tt:hover span.tooltip a:hover{ color: #aaaaff; text-decoration:none}

/*вывод фонового изображения*/
span.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url('../images/bubble.png') no-repeat top;
}


span.tt:hover span.middle { 
	display: block;
	padding: 0 8px; 
	background: url('../images/bubble_filler.png') repeat bottom; 
}




span.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url('../images/bubble.png') no-repeat bottom;
}
Далее качаем файл читаем readme.txt  (качаем тут)
Осталось только добавить изображения и сам фильтр, он так-же лежит в файле

Если есть необходимость добавить в форму редактора, читаем здесь
Удаления пользователя через админку из базы | Фильтр скрыть / показать текст для статей
Комментарии (21)
xflasherx 28 сентября 2011 в 18:42 0
Отлично работает
maia 28 сентября 2011 в 19:09 0
+ не знаю пока куда применить, но чет такое интересное )
lezginka.ru 28 сентября 2011 в 19:35 0
+
а в модулях не будет работать ?
lucku 28 сентября 2011 в 19:44 +1
Работает и в модулях.
Фильтр предназначен для работы с FCKEditor
Telema93 28 сентября 2011 в 19:58 0
а почему бы не всем пользователям? иногда нужно пояснить ссылку пользователю что-то, не важно в реге он или нет
lucku 28 сентября 2011 в 20:01 0
Так поэтому и выложено два варианта.
так как Вам надо выбираете сами.
Можете всем, а можете только за регеным.
Читаем в начале поста
Сделано два варианта
1. Показывает подсказку всем пользователям
2. Показывает только зарегистрирован пользователям, если пользователь не авторизованный, вместо подсказки появляться надпись Скрытый текст
reload 28 сентября 2011 в 20:31 0
А иходный код можно вставить в подсказку вместо текста? (чтоб рекламу туда пихать с картинками и описанием)
Можно и самому конечно проверить) поэтому заранее извиняюсь за вопрос)
lucku 28 сентября 2011 в 20:39 +1
Можно любой код вставлять, только учтите что в стилях ширина подсказки равняется 200px, если ширина нужна больше, редактируйте css
reload 28 сентября 2011 в 20:44 +1
отлично) и ширина больше не нужна - маленькая превьюшка с несколькими словами для рекламы достаточна)
NIKITA 28 сентября 2011 в 21:19 0
Интересно! А в разных статьях свое слово с подсказкой возможно?
lucku 28 сентября 2011 в 21:23 +2
Подсказок может быть сколько угодно, с разными текстами и в разных статьях.
NIKITA 28 сентября 2011 в 21:32 0
Возможно реализовать через форму?
NIKITA 28 сентября 2011 в 21:37 0
Имеется ввиду отдельной строкой в форме
lucku 28 сентября 2011 в 21:38 +1
Не понял? через какую форму.
Через эту {показ}пишем текст | пишем подсказку {/показ}, то да
NIKITA 28 сентября 2011 в 21:52 0
Да. Не писать {показ}пишем текст | пишем подсказку {/показ}, а непосредственно отдельной в отдельных ячейках формы
NIKITA 28 сентября 2011 в 21:58 0
Извини за навязчивость
NIKITA 28 сентября 2011 в 22:07 0
Опробывал, замечательная штука!
Как добавить подсказку в форму?
lucku 28 сентября 2011 в 23:18 +1
Для добавление читаем здесь
Алфей 29 сентября 2011 в 01:27 0
Спасибо огромное, тут недавно такую штуку за 800 руб. предлагали..
picaboo 30 сентября 2011 в 15:13 0
в дле есть мод похожий. всплывающие подсказки. в нем через админку можно ввести слова и подсказки к ним. а скрипт при выводе текста новости проверяет её на наличие этих слов и автоматом подставляет из базы подсказок, сами подсказки к ним. удобная штукенция. в эту сторону модифицировать не думали?
NIKITA 18 октября 2011 в 01:50 0
1. Нам необходимо убрать отображение только в области внутри элемента при выводе статьи
Неработает в Opere