Автор

23 03.2013
Всплывающая подсказка (tooltip)

Всплывающая подсказка (tooltip)


 

Очень маленький скрипт для всплывающих подсказок, который весит всего 2 килобайта, и притом абсолютно независим от сторонних библиотек.

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

 

ДЕМО
ИСХОДНИКИ

 

Всплывающая подсказка - довольно важный элемент оформления современного web сайта. А если ее еще красиво оформить и не злоупотреблять применением. Практически во всех сделанных мной сайтах я использую эту фишку! Работает замечательно и никаких усилий не состовляет при установке.

Подключаем

 

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" language="javascript" src="script.js"></script>

 

JavaScript

 

var tooltip=function(){
    var id = 'tt';
    var top = 3;
    var left = 3;
    var maxw = 300;
    var speed = 10;
    var timer = 20;
    var endalpha = 95;
    var alpha = 0;
    var tt,t,c,b,h;
    var ie = document.all ? true : false;
    return{
        show:function(v,w){
            if(tt == null){
                tt = document.createElement('div');
                tt.setAttribute('id',id);
                t = document.createElement('div');
                t.setAttribute('id',id + 'top');
                c = document.createElement('div');
                c.setAttribute('id',id + 'cont');
                b = document.createElement('div');
                b.setAttribute('id',id + 'bot');
                tt.appendChild(t);
                tt.appendChild(c);
                tt.appendChild(b);
                document.body.appendChild(tt);
                tt.style.opacity = 0;
                tt.style.filter = 'alpha(opacity=0)';
                document.onmousemove = this.pos;
            }
            tt.style.display = 'block';
            c.innerHTML = v;
            tt.style.width = w ? w + 'px' : 'auto';
            if(!w && ie){
                t.style.display = 'none';
                b.style.display = 'none';
                tt.style.width = tt.offsetWidth;
                t.style.display = 'block';
                b.style.display = 'block';
            }
            if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
            h = parseInt(tt.offsetHeight) + top;
            clearInterval(tt.timer);
            tt.timer = setInterval(function(){tooltip.fade(1)},timer);
        },
        pos:function(e){
            var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
            var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
            tt.style.top = (u - h) + 'px';
            tt.style.left = (l + left) + 'px';
        },
        fade:function(d){
            var a = alpha;
            if((a != endalpha && d == 1) || (a != 0 && d == -1)){
                var i = speed;
                if(endalpha - a < speed && d == 1){
                    i = endalpha - a;
                }else if(alpha < speed && d == -1){
                    i = a;
                }
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            }else{
                clearInterval(tt.timer);
                if(d == -1){tt.style.display = 'none'}
            }
        },
        hide:function(){
            clearInterval(tt.timer);
            tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
        }
    };
}();

 

CSS

 

* {margin:0; padding:0}
body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF}
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}

#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}

 

ВЫЗОВ ПОДСКАЗКИ

 

<span class="hotspot" onmouseover="tooltip.show('текст подсказки');" onmouseout="tooltip.hide();">ваша ссылка</span>

 

Демонстрацию вышеописанного вы можете увидеть тут! Лично я немного изменил стили СSS:

#text {}
.hotspot {cursor:pointer;}
#tt {
    position:absolute;
    z-index: 1000;
    height: avto;
    margin-left: -120px;
}

#tttop {
    display:block;
    background: url('http://www.s-sd.ru/img/Controlled_top.png') no-repeat center top;
    height: 17px;
    width: 234px;
    margin-top: -5px;
    overflow:hidden
}

#ttcont {
    display:block;
    background: url('http://www.s-sd.ru/img/Controlled_center.png') repeat-y top left;
    height: auto;
    width: 185px;
    margin-top: 0px;
    padding: 0 26px 0 26px;
    color:#dde6ed;
    text-shadow: rgba(0,0,0,.4) 0px 1px 0px;
    font-size: 12px;
}

#ttcont h2{
    color: #dde6ed;
    font-size:16px;
    text-shadow: rgba(0,0,0,.4) 0px 1px 0px;
    border-bottom: 1px dotted #dde6ed;
    padding: 3px 0px;
}


#ttcont img{
    background: #f7f4f1;
    padding: 9px;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
}


#ttbot {
    display:block;
    background-image: url('http://www.s-sd.ru/img/Controlled_bottom.png');
    margin-top: -1px;
    height: 39px;
    width: 234px;
    overflow:hidden
    }

 

Вот собственно и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

10 06.2017
Всплывающая подсказка (tooltip)

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


05 04.2013
Всплывающая подсказка (tooltip)

Мультимедийные сайты широко заполонили просторы интернета, люди хотят делиться впечатлениями, изображениями и видео-файлами. Зачастую на фотосайтах или порталах можно заметить ротаторы контента, которые помогают сэкономить место на ресурсе. Ротатор весьма удобный элемент для сайта, ведь в него можно запихнуть все что душа пожелает, при этом сохранить уйму места на сайте. В данном уроке мы рассмотрим как создать замечательный автоматический ротатор контента для сайта с помощью jQuery.


08 04.2013
Всплывающая подсказка (tooltip)

Если вы хотите с экономить место на своем сайте, при этом привернуть внимание посетителей к информации оформленной оригинальным образом, тогда этот урок именно для Вас.  Речь о том, как сделать так, чтобы под изображением находился необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимал место изображения. Данный эффект работает благодаря фреймворку jQuery. Что весьма удобно, ведь позволит достичь необходимого результата, давайте посмотрим что получилось..


04 12.2015
Всплывающая подсказка (tooltip)

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close