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;
}

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


PHP — простой ротатор баннеров, ротатор для DLE и WordPress
Аналог на javascriptАналог на PHP для больших кодов Очень простой ротатор кода на PHP. Сначала мы объявляем простой двумерный массив...
Как изменить пароль пользователя CMS DLE и WordPress через SQL-запрос
Перебираю старые статьи с целью их оптимизации и наткнулся на эту. В принципе, способ подойдет для любой системы на любом...
Полный гайд по миграции с CMS DLE на WordPress
Данный сайт в апреле 2019 года полностью переехал на CMS WordPress и в июне, после завершения всех правок (а их...
DLE – быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...

10 комментариев на «“DLE — красивые всплывающие подсказки через title, скрипт tooltip”»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. в дле 13 код вставил не между HEADER а перед закрывающимся BODY и все заработало

    • Все правильно. Но для данного скрипта не очень критично т.к. он находится в папке сайта и не подгружает ничего извне.

      Перед закрывающим актуально ставить внешние скрипты, например jQuery. Тем самым скрипт грузится после загрузки всей страницы и если на внешнем сервере проблемы, на скорость загрузки сайта он будет влиять не так сильно.

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