Красивые всплывающие подсказки только на CSS

  Александр Маврин   4 комментария

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

Демо

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

<a class="hint--top  hint--error" data-hint="Текст подсказки">Текст на странице</a>

Это как пример. Нужно прописывать 2 CSS класса. Один определяет положение подсказки, а второй — ее стиль. CSS код нужно добавить в ваш файл стилей. Если возникнут какие-то трудности, пишите, будем разбираться вместе, но в принципе, особо сложного здесь ничего нет, у вас все должно получится. 😉 Прошу вас обратить внимание на тот факт, что эти подсказки являются весьма кроссбраузерными. По крайней мере они отлично работают в IE-7, IE-8 и, соответственно во всех остальных популярных браузерах. Если вы решили создать сайт самостоятельно, то они вам подойдут. Лучше всего они смотрятся в браузере FireFox, в нем они всплывают более плавно. Где такие подсказки можно использовать? Я, например, применяю их к кнопке, когда есть какой-то файл для скачивания и указываю во всплывающей подсказке тип и размер загружаемого файла. Так я сделал и сейчас, только подсказки остались старые, менять пока не буду. Вы же можете их использовать даже в css таблице зебре.

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо

4 комментария
  1. Vadim:

    Добрый день.
    Можно подробнее, как подключать.
    Из ваших исходников не ясно что делать.
    И как к существующей своей таблице добавлять стили подсказок?
    Здесь : https://github.com/chinchang/hint.css
    уже все прочитал!

    • Что конкретно вам не понятно?

      • Vadim:

        Есть уже существующий проект,
        ( темы, таблицы стилей, главная страница,
        категории, подкатегории, статьи, и т.д.)

        1. как добавлять подсказки на страницу, куда.

        2. Как подключать подсказки на странице 
каким стилем

        3. Что добавлять в существующую таблицу стилей

        4. Если надо дописать стили, то как, т.е какие.

        P.S.
        В сети такого копипаста, как ваша статья видимо
        не видимо, и ни одной подробной инструкции.
        По сему хочу попросить подробную инструкцию прилагать,
        где, как куда и чего.

        Думаю корона с головы не свалиться, написать инструкцию.

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

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