Автор

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 07.2013
Всплывающая подсказка (tooltip)

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


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

Стилизация сайта, несомненно, самый важный элемент веб-дизайна. Разработчики стараются сделать более уникальным и привлекательным сайт для своих пользователей, ведь не секрет, что чем лучше дизайн сайт - тем более привлекает положительные отзывы пользователей. В данном уроке мы рассмотрим процесс создание красивой таблицы с ценами на услуги или товары при этом будем использовать исключительно CSS3, никаких изображений для таблицы, и минимум разметки HTML. Такие таблицы помогают пользователю быстро и легко найти то, что ему нужно.


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

Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close