Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Простые подсказки на CSS и JQuery

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

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

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

Разметка — HTML

Я хотел сохранить разметку как можно более простой, но в то же время достаточно гибкой, чтобы использовать различные сценарии. Основное звено будет иметь класс .tip_trigger, который будет отвечать за инициирование (активацию) нашей подсказки, и класс .tip, отвечающий за вывод содержания внутри подсказки.
 

<a class="tip_trigger" href="#">Отрывок Текста<span class="tip">Объяснить можно все что угодно</span></a>

 
Как видим, ничего сложного и ни какого нагромождения лишнего кода.

CSS

С помощью стилей сформируем внешний вид подсказки и определим позиции вывода на страницах сайта. Дизайн невероятно просто, есть место для полета фантазий и экспериментов для собственных проектов. Подсказка по умолчанию скрыта, с помощью jQuery будет показана в режиме наведения на объект. Устанавливаем абсолютное позиционирование и z-index от 1000, чтобы подсказка отображалась поверх остальных элементов страницы.
 

.tip {
    color: #fff; /*--Цвет текста--*/
    background:#1d1d1d; /*--Фон тела подсказки--*/
    display:none; /*--По умолчанию скрыта--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px; /*--Закругленные углы--*/
    -moz-border-radius: 3px;
    border-radius: 3px;
}

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

Магия jQuery

Для того чтобы наша подсказка заработала, необходимо подключить к документу jQuery файл, куда уж без этой волшебной библиотеки. Вы можете скачать файл непосредственно с сайта jQuery, или использовать размещенный на серверах Google, для чего у себя в документе между тегами <head> и </head> пропишите следующее:
 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

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

$(document).ready(function() {
        //Подсказка
        $(".tip_trigger").hover(function(){
                tip = $(this).find('.tip');
                tip.show(); //Показать подсказку
        }, function() {
                tip.hide(); //Скрыть подсказку              
        }).mousemove(function(e) {
                var mousex = e.pageX + 20; //Получить X координаты
                var mousey = e.pageY + 20; //Получить Y координаты
                var tipWidth = tip.width(); //Найти ширину подсказки
                var tipHeight = tip.height(); //Найти высоту подсказки
 
                //Расстояние до элемента от правого края окна
                var tipVisX = $(window).width() - (mousex + tipWidth);
                //Расстояние до элемента от нижнего края окна 
                var tipVisY = $(window).height() - (mousey + tipHeight);
 
                if ( tipVisX < 20 ) { //Если подсказка превышает X координату окна
                        mousex = e.pageX - tipWidth - 20;
                } if ( tipVisY < 20 ) { //Если подсказка превышает Y координату окна
                        mousey = e.pageY - tipHeight - 20;
                } 
                tip.css({  top: mousey, left: mousex });
        });
});

 
Простые подсказки для сайта

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

 

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>