loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

ХакиСкрипт всплывающих подсказок (tooltip или hint)

Написал assailant, 17 января 2011 | 9 комментариев | рейтинг новости не нравится   +2   нравится Версия для печати
Кроссбраузерный 100% рабочий скрипт, который заменяет стандартные всплывающие подсказки ссылок (tooltip или hint). Проверял в браузерах: Opera, Safari, Google Chrome, Mozilla, Navigator, IE 6-8. Пример работы скрипта можно посмотреть на данном сайте. Наведите курсор например на логотип 4dle.ru.

Установка:

Создайте файл tooltip.js в папке templates/ваш_шаблон/css, и вставьте в него следующий код:


/*
originally written by paul sowden <paul@idontsmoke.co.uk> | http://idontsmoke.co.uk
modified and localized by alexander shurkayev <alshur@ya.ru> | http://htmlcoder.visions.ru
*/

var tooltip = {

    /* НАЧАЛО НАСТРОЕК */
    options: {
        attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута
        blank_text: "(откроется в новом окне)", // текст для ссылок с target="_blank"
        newline_entity: "  ", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность; ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки
        max_width: 0, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована
        delay: 0, // задержка при показе tooltip'а в миллисекундах
        skip_tags: ["link", "style"] // теги, у которых не обрабатываем атрибуты alt и title
    },
    /* КОНЕЦ НАСТРОЕК */

    t: document.createElement("DIV"),
    c: null,
    g: false,
    canvas: null,

    m: function(e){
        if (tooltip.g){
            var x = window.event ? event.clientX + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : e.pageX;
            var y = window.event ? event.clientY + (tooltip.canvas.scrollTop || document.body.scrollTop) : e.pageY;
            tooltip.a(x, y);
        }
    },

    d: function(){
        tooltip.canvas = document.getElementsByTagName(document.compatMode && document.compatMode == "CSS1Compat" ? "HTML" : "BODY")[0];
        tooltip.t.setAttribute("id", "tooltip");
        document.body.appendChild(tooltip.t);
        if (tooltip.options.max_width) tooltip.t.style.maxWidth = tooltip.options.max_width + "px"; // all but ie
        var a = document.all && !window.opera ? document.all : document.getElementsByTagName("*"); // in opera 9 document.all produces type mismatch error
        var l = a.length;
        for (var i = 0; i < l; i++){

            if (!a[i] || tooltip.options.skip_tags.in_array(a[i].tagName.toLowerCase())) continue;

            var tooltip_title = a[i].getAttribute("title"); // returns form object if IE & name="title"; then IE crashes; so...
            if (tooltip_title && typeof tooltip_title != "string") tooltip_title = "";

            var tooltip_alt = a[i].getAttribute("alt");
            var tooltip_blank = a[i].getAttribute("target") && a[i].getAttribute("target") == "_blank" && tooltip.options.blank_text;
            if (tooltip_title || tooltip_blank){
                a[i].setAttribute(tooltip.options.attr_name, tooltip_blank ? (tooltip_title ? tooltip_title + " " + tooltip.options.blank_text : tooltip.options.blank_text) : tooltip_title);
                if (a[i].getAttribute(tooltip.options.attr_name)){
                    a[i].removeAttribute("title");
                    if (tooltip_alt && a[i].complete) a[i].removeAttribute("alt");
                    tooltip.l(a[i], "mouseover", tooltip.s);
                    tooltip.l(a[i], "mouseout", tooltip.h);
                }
            }else if (tooltip_alt && a[i].complete){
                a[i].setAttribute(tooltip.options.attr_name, tooltip_alt);
                if (a[i].getAttribute(tooltip.options.attr_name)){
                    a[i].removeAttribute("alt");
                    tooltip.l(a[i], "mouseover", tooltip.s);
                    tooltip.l(a[i], "mouseout", tooltip.h);
                }
            }
            if (!a[i].getAttribute(tooltip.options.attr_name) && tooltip_blank){
                //
            }
        }
        document.onmousemove = tooltip.m;
        window.onscroll = tooltip.h;
        tooltip.a(-99, -99);
    },
    
    _: function(s){
        s = s.replace(/\&/g,"&amp;");
        s = s.replace(/\</g,"&lt;");
        s = s.replace(/\>/g,"&gt;");
        return s;
    },

    s: function(e){
        if (typeof tooltip == "undefined") return;
        var d = window.event ? window.event.srcElement : e.target;
        if (!d.getAttribute(tooltip.options.attr_name)) return;
        var s = d.getAttribute(tooltip.options.attr_name);
        if (tooltip.options.newline_entity){
            var s = tooltip._(s);
            s = s.replace(eval("/" + tooltip._(tooltip.options.newline_entity) + "/g"), "<br />");
            tooltip.t.innerHTML = s;
        }else{
            if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
            tooltip.t.appendChild(document.createTextNode(s));
        }
        tooltip.c = setTimeout(function(){
            tooltip.t.style.visibility = 'visible';
        }, tooltip.options.delay);
        tooltip.g = true;
    },

    h: function(e){
        if (typeof tooltip == "undefined") return;
        tooltip.t.style.visibility = "hidden";
        if (!tooltip.options.newline_entity && tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
        clearTimeout(tooltip.c);
        tooltip.g = false;
        tooltip.a(-99, -99);
    },

    l: function(o, e, a){
        if (o.addEventListener) o.addEventListener(e, a, false); // was true--Opera 7b workaround!
        else if (o.attachEvent) o.attachEvent("on" + e, a);
            else return null;
    },

    a: function(x, y){
        var w_width = tooltip.canvas.clientWidth ? tooltip.canvas.clientWidth + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : window.innerWidth + window.pageXOffset;
        var w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : tooltip.canvas.clientHeight + (tooltip.canvas.scrollTop || document.body.scrollTop); // should be vice verca since Opera 7 is crazy!

        if (document.all && document.all.item && !window.opera) tooltip.t.style.width = tooltip.options.max_width && tooltip.t.offsetWidth > tooltip.options.max_width ? tooltip.options.max_width + "px" : "auto";
        
        var t_width = tooltip.t.offsetWidth;
        var t_height = tooltip.t.offsetHeight;

        tooltip.t.style.left = x + 12 + "px";
        tooltip.t.style.top = y + 12 + "px";
        
        if (x + t_width > w_width) tooltip.t.style.left = w_width - t_width + "px";
        if (y + t_height > w_height) tooltip.t.style.top = w_height - t_height + "px";
    }
}

Array.prototype.in_array = function(value){
    var l = this.length;
    for (var i = 0; i < l; i++)
        if (this[i] === value) return true;
    return false;
};

var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
    if (root.addEventListener) root.addEventListener("load", tooltip.d, false);
    else if (root.attachEvent) root.attachEvent("onload", tooltip.d);
}

Вверху кода увидите настройки. Из них я выставил только задержку появления на 0 (чтобы подсказка появлялась мгновенно).
К настройкам добавлю от себя: чтобы изменить расстояние между курсором и подсказкой, найдите (123 строка):

tooltip.t.style.left = x + 12 + "px";
tooltip.t.style.top = y + 12 + "px";

Первая строчка - горизонталь, вторая - вертикаль. "12" - это расстояние в пикселях подсказки от курсора. Изменяйте по своему усмотрению.

Затем в Ваш style.css, вставьте стиль для всплывающей подсказки:

#tooltip{
background:#fff;
border:1px solid #46688e;
color:#215d98;
font:11px verdana;
margin:0px;
padding:5px;
position:absolute;
visibility:hidden;
}

Это вариант по стилю с 4dle.ru. Можете настроить вид подсказки по своему усмотрению.

В Вашем шаблоне, в файл главной страницы (main.tpl), вставьте:

<script language="javascript" src="тег theme/css/tooltip.js"></script>

Всё.


Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Написал assailant, 17 января 2011 в 10:35 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 6, Пользователи
Карма:
Забыл сказать: тестировал на DLE 9.2. Думаю на остальных версиях тоже будет работать нормально. Работает без глюков, подсказки всплывают везде где они есть :)

Написал Nickola, 17 января 2011 в 11:43 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 30, Пользователи
Карма:
удалено

Написал assailant, 17 января 2011 в 12:43 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 6, Пользователи
Карма:
Можно ещё в стиль всплывающей подсказки добавить:

opacity: .91;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=91);

для добавления прозрачности :) Прозрачность работает во всех вышеупомянутых браузерах, кроме IE 6. Можно эту прозрачность как-то и в скрипт вставить, но уж извините, в JS не силён)

Написал dark666, 17 января 2011 в 15:03 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 97, Пользователи
Карма:
А что jquery уже не в моде? =)

Написал assailant, 17 января 2011 в 15:14 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 6, Пользователи
Карма:
В моде :) Просто это единственный нормальный рабочий скрипт таких подсказок который я нашёл. Решил поделиться, вдруг кому пригодится) Сам написать на jQuery не могу ибо не умею)

Написал wcp, 17 января 2011 в 16:14 плохой комментарий   -1   хороший комментарий
Новостей: 0, комментариев: 95, Пользователи
Карма:

Написал assailant, 17 января 2011 в 16:58 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 6, Пользователи
Карма:
Мда, то что в этом посте по проще будет чем то что по этой ссылке. Объясните ламеру, в чём разница?) В плавном появлении что-ли? Там код гораздо сложнее, плюс ко всему в шаблоне ещё и функцию надо прописывать:

$(function() {
$('#tooltiper a').tooltip({
track: true,
delay: 0,
showURL: false,
fade: 200
});
});


А тут подгружаешь один файл и всё. Плюс код меньше весит, даже с комментариями.

Написал killoff, 17 января 2011 в 19:37 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 14, Пользователи
Карма:
а это разве не то же самое?
http://4dle.ru/hacks/1147158990-novyjj-krasivyjj-khint-tooltip-na.html
По моему - tooltip...
PS: кстати, tooltip на этом сайте кривой - нормально отображает пока не промотаешь страницу немного вниз - тогда при наведении даже на облако тегов хинт сам слетает вверх страницы за её пределы bm

Написал kagorec, вчера, 03:55 плохой комментарий   +1   хороший комментарий
Новостей: 3, комментариев: 71, Пользователи
Карма:
http://forum.jquery.com/topic/wtooltip этот пользую bw . этих туултипов море выбора и нет надобности постить на сайте.

Информация



Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Анализ Тиц и PR сайта

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]