DLE — красивые всплывающие подсказки через title, скрипт tooltip

dle tooltip title - DLE — красивые всплывающие подсказки через title, скрипт tooltip

Небольшой скрипт, с помощью которого можно настроить всплывающую подсказку на теге 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;
}

Читайте также

Похожие записи

DLE — быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...
DLE — мой первый модуль, как написать свой модуль Datalife Engine
Как ни пытался уйти с DLE из-за того, что он платный, а на рынке существует куча бесплатных аналогов, не получается...
DLE на HTTPS — основные проблемы и их решение
Столкнулся с рядом проблем, когда наконец-то решился перебраться на https. Не появлялись некоторые картинки, видео, а в адресной строке писалось,...
DLE — Модуль форума SimpleBB 1.1
Полноценный форум с единой регистрацией и авторизацией, единым акаунтом и ссылками на профиль от dle \»user/username/\» на движке SimpleBB 1.1...

Комментарии

  1. @Dimm пишет:
    27.08.2014 в 18:20

    Показывает только заголовок, а краткую новость не хочет почему-то..

  2. @devarts пишет:
    27.08.2014 в 21:12

    Цитата: Dimm
    Показывает только заголовок, а краткую новость не хочет почему-то..

    {text-limit="xxx"}
    где ххх — требуемое количество символов из краткой новости.

    Как вариант, в вашей версии движка может не работать такая функция.

    Знаю точно, что работает с 9.7, ниже не пробовал!

  3. @Dimm пишет:
    27.08.2014 в 21:55

    у меня версия 10.2
    Самый первый код в посте я не ставил, потому как не понял куда.

    Подскажите пожалуйста , куда его вставить..

  4. @devarts пишет:
    27.08.2014 в 23:36

    Цитата: Dimm
    Подскажите пожалуйста , куда его вставить..

    Файл похожих новостей в шаблоне: relatednews.tpl

  5. @Dimm пишет:
    28.08.2014 в 00:04

    Ставил туда, не заработало, только заголовок показывается.
    Спасибо за ответы Вам.
    Странно, удалил всё в relatednews.tpl , заголовок все равно показывается. Может быть такое, что еще где-то поправить можно?

  6. @devarts пишет:
    28.08.2014 в 01:07

    Цитата: Dimm
    Может быть такое, что еще где-то поправить можно?

    Даже не знаю. Я 10.2 не ставил, возможно там разгадка. Раз заголовок выводит, значит скрипт работает правильно.

  7. @dianisoss пишет:
    31.10.2018 в 16:17

    Скажите как сделать чтоб срабатывало на всех ссылках где есть title а не только где картинки.

  8. @devarts пишет:
    01.11.2018 в 15:38

    Цитата: dianisoss
    Скажите как сделать чтоб срабатывало на всех ссылках где есть title а не только где картинки.

    $(document).ready(function(){$("a").easyTooltip()});
    $(document).ready(function(){$("img").easyTooltip()});

    Строки выше это инициализация на jQuery. Каждая строка — отдельное правило. Добавляете нужный тег и все должно работать. Пример:

    $("a") — есть в коде
    $("img") — есть в коде
    $("i") — нету
    $("b") — нету
    и так далее

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *