Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Реализация всплывающих подсказок с выводом контента в dle

Реализация всплывающих подсказок с выводом контента в dle

Prowockator 01.10.2012 jquery, dle, подсказка Все вопросы » Общие вопросы по вёрстке 7785

вопрос

Здравствуйте! Сейчас на многих сайтах можно увидеть всплывающие подсказки в которых выводится картинка и описание новости. Вот и мне захотелось такое реализовать на своем сайте. Проанализировав исходный код пару сайтов где стоят такие подсказки, я понял что за это отвечает плагин BetterTip для jQuery. Ну я сразу же погуглил и нашел его с нормальным описанием вот здесь. Как мне стало понятно скрипт подгружает специально созданную html страницу и выводит ее в подсказке.

Я хочу подключить данный плагин к блоку "популярные новости".
Вопрос заключается в том, как вывести в подсказку tpl страницу с поддержкой тегa {image-x} и доп. полей. ?
Смотрел как сделано на других сайтах но так и не понял как они это реализовали. Подскажите пожалуйста как можно сие чудо сотворить.

Ответа пока нет

22 комментария

Админ

3457

ПафНутиЙ - 2015-05-151 октября 2012 21:02 - #7608

Не обязательно это делать через тот плагин, тут например это реализовано на bootstrap popover (<< рабочий пример)

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

Prowockator - 2015-05-152 октября 2012 17:31 - #7627

Спасибо плагин я нашел, но нифига не пойму как его подключить там документация вся на енглише. Может быть Вы мне подскажете как им правильно пользоваться ??

Админ

3457

ПафНутиЙ - 2015-05-152 октября 2012 17:35 - #7628

Ну так там же пример есть, скопируйте исх код. и скачайте кастомизированный bootstrap.js (там галочками можно отмечать нужные плагины) - вам нужно tooltip и popover

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

Prowockator - 2015-05-152 октября 2012 22:15 - #7636

Скачал я архив в нем файл bootstrap.js и bootstrap.css. Подключил к шаблону оба файла. А теперь не могу ето все собрать до кучи. Помогите написать правильную html разметку и как активировать сам плагин.
Я прописал это:

<script type="text/javascript">
       $(function(){ 
           $('#element').popover('show')
        });
    </script>

и это:

<a href="#" id="element" rel="popover"data-content="тра-ля-ля">hover over me</a>

и ничерта не произошло ) просто я маловато в этом понимаю.

Юзер

Prowockator - 2015-05-153 октября 2012 14:12 - #7652

ПафНутиЙ,
Ну так поможете или нет ?

Юзер

181

Mr. Hyde - 2015-05-153 октября 2012 14:58 - #7653

<a href="/" rel="popover" data-placement="top" title="text" data-content="text">Dle Code</a>

Юзер

Prowockator - 2015-05-153 октября 2012 15:57 - #7654

Ну так у меня тоже самое кроме data-placement="top" Что ето?

Админ

3457

ПафНутиЙ - 2015-05-153 октября 2012 17:06 - #7658

адрес сайта в студию.

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

Prowockator - 2015-05-153 октября 2012 17:52 - #7659

ПафНутиЙ, я этот плагин пока только на денвер устанавливал.

Админ

3457

ПафНутиЙ - 2015-05-153 октября 2012 20:00 - #7663

ну тогда я бессилен.

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

Prowockator - 2015-05-154 октября 2012 12:47 - #7671

ПафНутиЙ, С выводом подсказки разобрался: data-original-title - это заголовок подсказки, а data-content - это сама подсказка. Но мне нужно чтобы эта подсказка подгружалась во время когда на ссылку наводят курсор, а не сразу со всей страницей. Вот в вашем коде на этой странице непонятно от куда она берется:

<div id='comm-id-7608'>Не обязательно это делать через тот плагин, тут например это реализовано на <cite class="wtf">bootstrap popover</cite> (&lt;&lt; рабочий пример)</div>                
            </div>

Как Вы это реализовали ??