Простые всплывающие по нажатию подсказки на JavaScript

Фотография к материалу: Простые всплывающие по нажатию подсказки на JavaScript
6
октябрь
2017

Рассмотрим подробно как сделать простые всплывающие подсказки или окна на JavaScript, которые открываются и закрываются по клику по ним или рядом с ними. При этом может быть открыта только одна из них. Будем использовать JavaScript и CSS без jQuery. Кому нет нужды разбираться, можно взять готовый код.

Для простоты понимания, сначала посмотрим готовый вариант. При клике на Шкаф или Диван открываются подсказки. Они закрываются если кликнуть где-либо в области отмеченной цветом включая саму подсказку. Можно попробовать ниже:

Шкаф
Описание примера 1

 

Диван Описание примера 2

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

CSS

.helptip {
    padding: 3px 5px;
    margin: 5px;
    background: #eee;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
    position: relative; /* Важно!
    Размещать абсолютное позиционирование внутри
    относительно данного тега */
    width: auto;
}
.helptip:hover {
    background: #fff;
}
.helptip div,
.helptip span {
    padding: 8px;
    margin: 5px;
    background: #ebebeb;
    border-radius: 5px;
    border: 1px solid #ddd;
    position: absolute; /* Важно!
    Абсолютное позиционирование */
    display: none; /* Важно! Скрыть */
    left: 5px;
    bottom: 5px;
    z-index: 99; /* Важно!
    Всплывающие подсказки всегда выше
    нижеследующих элементов */
    min-width: 400px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    cursor: default;
}
.helptip div:hover,
.helptip span:hover {
    background: #fff;
}

JavaScript

Функции в JavaScript подобны объектам. Поэтому ниже используемая переменная helptip.v будет хранить значение после завершения работы функции и будет доступна вне ее, что мы и делаем обращаясь с ней в другой функции helptipx. Этот способ также позволяет избегать создания дополнительных глобальных переменных, что удобно.

// Основная функция, передаем в нее обрабатываемый тег
// или this (для текущего тега)
function helptip(t) {
    // Разрешаем закрытие подсказок
    // Создаем постоянную переменную этой функции для этих целей
    // Условимся: если ноль, то можно закрывать, а если единица, то нельзя
    helptip.v = 0;
    // Берем последний дочерний тег
    var b = t.children[(t.children.length-1)];
    // Если открыт, то закрываем
    if (b.style.display=="block") helptipx();
    else {
        // Закрываем все
        helptipx();
        // Открываем текущий
        b.style.display = "block";
        // Запрещаем закрытие подсказки вызванного последующими событиями
        helptip.v = 1;
    }
}
// Функция закрывает все подсказки
function helptipx() {
    // Если было нажатие для открытия подсказки, то закрывать нельзя
    // Поэтому проверяем:
    if (helptip.v==1) {
        // Разрешаем закрытие в будущем
        helptip.v = 0;
        // И выходим
        return;
    }
    // Выбираем все теги с классом .helptip
    var s = document.querySelectorAll(".helptip");
    // и перебираем их циклом
    for (var i=0; i < s.length; i++) {
        // Скрываем последний дочерний тег
        s[i].children[(s[i].children.length-1)].style.display = "none";
    }
}

 

HTML

Комментарии отключены
Понимание flex или просто о непривычном
21
сентябрь
2017

FlexBox, или просто flex, это новый способ верстки страницы или ее части. Его использование сильно отличается от привычных методов. Однако его можно достаточно просто объяснить разделив набор параметров или свойств на две части: родительские и дочерние.


Подробнее
Как правильно писать CSS код - 5 простых эффективных правил
8
сентябрь
2017

Несколько простых правил, которые помогут избежать многих проблем при верстке.


Подробнее
Как точно расположить элемент внутри другого элемента
8
апрель
2013

Для этого нам послужит свойство position со значением absolute. Однако, значения top, right, bottom, left при значении position:absolute будут указываться относительно всего окна сайта.

Это верно, а чтобы значения работали относительно родительского элемента (внутри которого располагается объект), необходимо родительскому элементу присвоить значение position:relative

Это кажется простым, однако многие начинающие верстальщики сталкиваются с подобными проблемами.

Подобная техника позволяет приклеить к нужному месту вложенный объект.

Поясним на примере.


Подробнее
Все статьи