Как сделать всплывающие подсказки при помощи CSS3 и jQuery

всплывающая подсказкаИ так сегодня мы создадим с вами всплывающие подсказки для этого нам необходимо:

Основополагающие моменты.

1. Создадим папку под названием подсказка. В ней создадим файл index.html, папку styles, в которой будут лежать наши стили (главный файл стиля style.css и файл стиля подсказки — tooltips.css) и папку js, в которой будет лежать наш скрипт.

2. Теперь откроем файл index.html и внесём туда следующий код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Всплывающие подсказки при помощи  CSS3 и JQuery</title>
    <link rel="stylesheet" href="styles/style.css" />
    <link rel="stylesheet" href="styles/tooltips.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>

3. Теперь создадим 3 ссылки с различными классами. Каждый класс будет отвечать за отображение подсказки.

<h2>Всплывающие подсказки созданные только при помощи CSS3 и JQuery</h2>
    <ul>
        <li>
            <a href="#" title="Всплывающая подсказка слева" class="tooltip_link left">Ссылка 1t</a>
        </li>
        <li>
            <a href="#" title="Всплывающая подсказка по центру" class="tooltip_link center">Ссылка 2</a>
        </li>
        <li>
            <a href="#" title="Всплывающая подсказка справа" class="tooltip_link right">Ссылка 3</a>
        </li>
    </ul>
    <h3>Всплывающие подсказки в параграфе</h3>
    <p>
        Pellentesque habitant morbi <a href="#" title="Вот так выглядит всплывающая подсказка в тексте." class="tooltip_link left">tristique senectus</a> et netus et malesuada fames ac turpis egestas. <a href="#" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." class="tooltip_link center">Vestibulum</a> tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." class="tooltip_link right">Donec</a> eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>

В описании ссылки мы используем 2 класса, первый класс —tooltip_link — описывает основной стиль, а второй класс определяет место её расположения.

4. Если мы хотим чтобы подсказка появлялась над каким-нибудь текстом нам необходимо её обрамить в div тэги со соответствующими классами.

<div class="tooltip [left, centr or right]">Текст для подсказки</div> <!-- Общее определение -->
<div class="tooltip left">Текст для подсказки</div> <!-- Подсказка слева -->
<div class="tooltip right">Текст для подсказки</div> <!-- Подсказка справа -->
<div class="tooltip center">Текст для подсказки</div> <!-- Подсказка по центру -->

Задание стилей.

5. Откроем файл tooltip.css и внесём туда следующий код

a.tooltip_link {  position: relative !important;}
/*Описание самой подсказки*/
.tooltip {
    display: none;
    position: absolute !important;
    width: 200px;
    background: rgba(61,102,143,0.9);
    padding: 5px;
    margin: 0 0 12px 0;
    color: #fff;
    z-index: 100;
    bottom: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
}
.tooltip:after {
    content: "";
    position: absolute !important;
    bottom: -14px;
    z-index: 100;
    border: 0 solid rgba(61,102,143,0.9);
    border-bottom: 14px solid transparent;
    width: 100%;
}
.tooltip:before {
    content: "";
    position: absolute !important;
    border: 0 solid rgba(61,102,143,0.9);
    bottom: -14px;
    z-index: 100;
}
/*Описание расположения подсказки*/
.tooltip.left {
    border-radius: 5px 5px 5px 0;
}
.tooltip.left:after {
    border-left-width: 14px;
    left: 0;
}
.tooltip.right {
    border-radius: 5px 5px 0 5px;
}
.tooltip.right:after {
    border-right-width: 14px;
    right: 0;
}
.tooltip.center {
    border-radius: 5px;
}
.tooltip.center:after {
    border-left-width: 10px;
    width: 50%;
    left: 50%;
}
.tooltip.center:before {
    border-right-width: 10px;
    border-bottom: 14px solid transparent;
    width: 50%;
    right: 50%;
}

В основной файл стилей вносим описание основных компонентов.

body {
    background: white;
    font-family: Consolas, Trebuchet MS;
    font-size: 16px;
    text-align: center;
}
a {color: #3D668F;}
h2, h3 {color: #3D668F;}
h2 {font-size: 34px;}
h3 {font-size: 28px;}
ul {
    margin: 0 auto;
    width: 960px;
    font-size: 20px;
    margin-top: 100px;
    margin-bottom: 100px;
}
ul li {
    list-style: none;
    display: inline;
    margin: 0 20px;
}
p {
    width: 860px;
    margin: 0 auto;
    margin-top: 50px;
}

Анимируем подсказку при помощи jQuery.

6. Определим какие события нам необходимо выловить.

А теперь более подробно:

Когда курсор мышки только зашёл в область ссылки (событие — On Mouse Enter Event) нам необходимо проделать следующие действия:

Код ниже описывает все наши действия

$("a").mouseenter(function (e) { //событие произошло когда курсор мышки зашёл на ссылку
    var $class_name = $(this).attr("class").slice(13); //получить класс заданного элемента "a" element after leaving 13 characters which is equal to "tooltip_link "
    var $x = e.pageX - this.offsetLeft; //получить координату X  мышки относительно ссылки
    var $tooltip_text = $(this).attr("title"); //получить атрибуты ссылки/элемента
 
    if ($tooltip_text.length > 0) { //отобразить подсказку только в том случае, если для неё подготовлен текст
 
        $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //добавляем все необходимые классы и элементы 
 
        $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //установим позицию отображению подсказки относительно левой стороны
        $("a > div.tooltip.left").css("left", "" + $x + "px"); //установим позицию отображению подсказки относительно левой стороны
        $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); 
 
        $("a > div.tooltip." + $class_name).fadeIn(300); //отображаем и задаём эффект анимации
    }
});

Теперь, нам необходимо обработать событие, когда курсор мышки покинет нашу ссылку (событие -On Mouse Leave Event). Нам необходимо учесть следующее:

Следующий код сделает все перечисленные моменты

$("a").mouseleave(function () { //курсор мышки покинул заданный элемент (ссылку)
    var $class_name = $(this).attr("class").slice(13); // получить атрибуты класса,13 это количество символов, которое соответствует класс "tooltip_link "
 
    //добавляем эффект угасания, а также задержку в 300 мс и очищаем очередь
    $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function () {
        $(this).remove();
        $(this).dequeue();
    });
});

Демку и скачать готовый файл можно с официального сайта.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *