Всплывающая Подсказка Как Сделать?

Разработчикам Общение разработчиков
1

Привет сообщество,

извините за элементарный вопрос, подскажите пожалуйста:

как сделать всплывающую подсказку, например вот так как здесь http://pentik.shop в хедере мы видим "Адреса магазинов", при наведении возникает текстовый блок с подробностями.

Желательно чтобы все обошлось штатными средствами

2

На элемент можно повесить класс cm-tooltip и в атрибуте title указать содержимое.

3

На элемент можно повесить класс cm-tooltip и в атрибуте title указать содержимое.

При этом методе, всплывающая подсказка - это текст рядом с указателем мыши, я имел в виду возникновение при наведении сверстанного блока, как в примере на картинке:

GsNQiR.png
GsNQiR.png876×534 33 KB

4

Можно сделать на css или javascript. Но блок с адресами тоже уже должен быть. Здесь можно сделать произвольный блок в оберткой "выпадающий список", но выпадать будет по клику. Если нужно по наведению, то можно так.

Делаете произвольный блок:


    Текст ссылки
    

        содержимое блока
    

    
        .box {
           display: none;
        }
        .link:hover {
           cursor: pointer;
        }
        .link:hover + box {
           display: block;
        }

или

Код не проверял!!!

Если не разберетесь напишите в личку.

5

Добрый день! А можно делать всплывающие подсказки к тексту на обычной страничке?

6

Если текст нужно показывать рядом с указателем мыши, то используйте решение из моего поста. Часть текста, например, можно засунуть в тэг span

...текст до <span class="cm-tooltip" title="подсказка">текст</span> текст после...

1 лайк
7

Спасибо! Получается!

8

Рад был помочь!