Tooltip всплывающая подсказка

Автор: Admin    Категория: Магия ЯваСкрипт / Разные скрипты    Теги:  tooltip    Дата: 16-02-2011, 21:21
Tooltip всплывающая подсказкаСтарый скрипт, попался мне уже давным-давно, но до сих пор это самый лучший универсальный и до сих пор работающий скрипт всплывающей подсказки
Принцип данного скрипта заключается в обработке у всех элементов (за исключением тех, что указаны в настройке skip_tags) атрибутов title и alt таким образом, что при наведении «мышки» над элементом страницы с одним из этих атрибутов будет появляться нестандартная всплывающая подсказка. Она полностью настраивается через CSS (элемент #tooltip).
Скрипт работает с правильным !DOCTYPE, в отличии от многих других, подобных этому.
Вот сам скрипт(назвать его можно типа tooltip.js):



var tooltip = {

    /* НАЧАЛО НАСТРОЕК */
    options: {
        attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута
        blank_text: "(откроется в новом окне)", // текст для ссылок с target="_blank"
        newline_entity: "  ", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность; ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки
        max_width: 0, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована
        delay: 100, // задержка при показе 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 + 8 + "px";
        tooltip.t.style.top = y + 8 + "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);
}



Далее, в свою таблицу CSS вставляем настройки вида подсказки:



#tooltip{
background:#CCE9FA;   /*цвет фона*/
border:1px dashed #666666;   /*толщина, вид и цвет рамки*/
color:#333333;   /*цвет текста*/
font-size:12px;   /*размер шрифта*/
margin:0;
padding:4px;   /*расстояние от текста до рамки*/
position:absolute;
visibility:hidden;
z-index:101;   /*ставит подсказку выше всех элементов*/
}



Можно выбрать любой вид рамки:

Tooltip всплывающая подсказка

Пользуемся на здоровье!
Версия для печати
  • 100
     Просмотров: 5 839      Комментариев: 14   

Понравилась новость Tooltip всплывающая подсказка на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

№ 14 Автор: Admin 19 сентября 2012 14:26

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: shelest
В этих случаях никаких подсказок не показывается.

Неизлечимо? Или как-то можно их примирить?

Почитайте комментарии в этой теме.
Это не конфликты, скрипты галерей показывают картинки в своих контейнерах, как бы отдельных от страницы сайта и на эти контейнеры действия других скриптов не распространяется если это явно не задано для галереи.
Как заставить работать подсказку в галерее - я не заморачивался и не знаю, потому как мне например это не нужно, будет только мешать.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 13 Автор: shelest 19 сентября 2012 14:13

 Вот такой я - shelest

shelest
Гости
комментариев
публикаций

Статус:
Прошу прощения, ещё раз спрошу..

В некоторых частях сайта у меня конфликты tooltip.js с оснасткой окошек лайтбокса и ханслайда.

Например:

http://i40.fastpic.ru/big/2012/0919/91/f06a3f770cbb55f61e2f697aeb20d791.jpg

В этих случаях никаких подсказок не показывается.

Неизлечимо? Или как-то можно их примирить?

  • Нравится
  • 0
    

№ 12 Автор: shelest 19 сентября 2012 13:18

 Вот такой я - shelest

shelest
Гости
комментариев
публикаций

Статус:
Цитата: Admin
Я извиняюсь, но предполагалось, что если человек ставит такой скрипт то он автоматически в курсе что все скрипты нужно подключать что бы они заработали.

Это я затупил, как и с длиной тоже, там же ясно написано. Спасибо, всё работает.))

  • Нравится
  • 0
    

№ 11 Автор: Admin 19 сентября 2012 13:04

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: shelest
Нет, вы не указали в исходном посте, я этого и не делал. Подключил. Заработало.

Я извиняюсь, но предполагалось, что если человек ставит такой скрипт то он автоматически в курсе что все скрипты нужно подключать что бы они заработали.
Цитата: shelest
Подскажите как в таблице стилей ограничить длину подсказки.

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


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 10 Автор: shelest 19 сентября 2012 12:58

 Вот такой я - shelest

shelest
Гости
комментариев
публикаций

Статус:
Цитата: Admin
А скрипт подключаете? Как? Типа так:

Нет, вы не указали в исходном посте, я этого и не делал. Подключил. Заработало. Подскажите как в таблице стилей ограничить длину подсказки.

А то если есть большие описания - растягивается на всю страницу, залезает за границы. Я пробую, но пока что-то не выходит.

  • Нравится
  • 0
    

№ 9 Автор: Admin 19 сентября 2012 12:32

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: shelest
Я копирую код, вставляю его в текстовый документ, который потом переименовываю в tooltip.js

А скрипт подключаете? Как? Типа так:
<script type="text/javascript" src="http://адрес сайта/tooltip.js"></script>

на ВСЕХ страницах сайта.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 8 Автор: shelest 19 сентября 2012 12:24

 Вот такой я - shelest

shelest
Гости
комментариев
публикаций

Статус:
Цитата: Admin
Юкоз - движок со своими замарочками, у меня на одном юкозовском сайте стоит этот скрипт, но чтоб всё заработало сайту обязательно должен быть прописан DOCTYPE

DOCTYPE у меня точно такой же.. Но не пашет, зараза. Почему-то..

Я копирую код, вставляю его в текстовый документ, который потом переименовываю в tooltip.js

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

  • Нравится
  • 0
    

№ 7 Автор: Admin 19 сентября 2012 11:42

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: shelest
А для uСoz-овских сайтов непригодна?

Юкоз - движок со своими замарочками, у меня на одном юкозовском сайте стоит этот скрипт, но чтоб всё заработало сайту обязательно должен быть прописан DOCTYPE например так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

но, бывает если сайту на юкозе прописать DOCTYPE то ломается весь дизайн, потому что сайт сразу сделан не грамотно и теперь весь дизайн пересобирать просто нет возможности, тогда Вам поможет другой скрипт Хинт для Юкоз (Всплывающая подсказка) он мне нравится меньше, но он работает без указания DOCTYPE


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 6 Автор: shelest 19 сентября 2012 04:26

 Вот такой я - shelest

shelest
Гости
комментариев
публикаций

Статус:
А для uСoz-овских сайтов непригодна?

  • Нравится
  • 0
    

№ 5 Автор: vova196719 29 июля 2012 23:41

 Вот такой я - vova196719

vova196719
Гости
комментариев
публикаций

Статус:
Вот вот, либо для скрипта tooltip, нужно чего то прописать. Либо в скрипте highslide.
Скорее всего в highslide.
Я им письмо на форум выложил, не знаю. если разберут мой английский, тогда помогут. Во всяком случае, я точно видел что проблему похожую они решали. Только в место подсказки выскакивала фотка. Попробуйте и вы, может с языком у вас получше, если интересно. Ну а на крайний случай, в конце концов, можно просто убрать подсказку в скрипте. Останется только минус. Я думаю догадаются что нужно нажать, что бы закрыть фотку.

  • Нравится
  • 0
    

№ 4 Автор: Admin 29 июля 2012 22:32

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: vova196719
Я не спец в скриптах, просмотрел на сайте highslide, так и ни чего и не нашел.
Видимо сказывается плохое знание языка.Может что то подскажете?

Оно и не будет работать, потому что контейнер с увеличенной картинкой создаётся скриптом highslide и Tooltip для этого контейнера уже не работает.
Может и можно как то это обойти, но, видимо никто этим вопросом не задавался как.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 3 Автор: vova196719 29 июля 2012 16:07

 Вот такой я - vova196719

vova196719
Гости
комментариев
публикаций

Статус:
Здравствуйте.
Я сам пользуюсь этим скриптом.
И смотрю что вам тоже нравится highslide.
Но меня волнует вопрос,что при наведении на картинку, срабатывает ваш Tooltip, а когда картинка увеличина, tooltip не работает. Плохо. И как решить проблему?
Я не спец в скриптах, просмотрел на сайте highslide, так и ни чего и не нашел.
Видимо сказывается плохое знание языка.Может что то подскажете?
Спасибо

  • Нравится
  • 0
    

№ 2 Автор: Admin 5 февраля 2012 15:02

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: DREMBASS
Показать-бы его в видео уроке. Было-бы очень и очень хорошо......

Да тут и так подробно всё расписано, видео тут не нужно.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: DREMBASS 5 февраля 2012 14:36

 Вот такой я - DREMBASS

DREMBASS
Гости
комментариев
публикаций

Статус:
Показать-бы его в видео уроке. Было-бы очень и очень хорошо......
Я чайник, но так интересно. fellow
А еще прикрепить к html.

  • Нравится
  • 0
    

Информация

Внимание!

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

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус