Sozdaiblog.ru
Назад

Как сделать Анимированные Всплывающие Подсказки?

Опубликовано: 25.01.2013
Время на чтение: 9 мин
15
3

всплывающая подсказка

Приветствую всех читателей – Sozdaiblog.ru!

Сегодня я покажу, как сделать всплывающие подсказки с помощью CSS стилей.

Вся идея в том, что есть список со ссылками или в нашем случае, социальные иконки, которые показывают маленькие подсказки при наведении курсора мыши.

Неупорядоченный список будет выглядеть следующим образом:

 

<ul>

        <li><a class="tt-googl_plus" href="Ссылка"><span>Google Plus</span></a></li>

        <li><a class="tt-rss" href="Ссылка"><span>Rss</span></a></li>

        <li><a class="tt-twitter" href="Ссылка"><span>Twitter</span></a></li>

        <li><a class="tt-wikipedia" href="Ссылка"><span>Wikipedia</span></a></li>

        <li><a class="tt-wordpress" href="Ссылка"><span>WordPress</span></a></li>

        <li><a class="tt-you_tube" href="Ссылка"><span>You Tube</span></a></li>

</ul>

 

В нём Вы вписываете названия всплывающих подсказок и адрес перенаправления для каждой кнопки.

Представленный выше список размещаем в любом месте документа между тегами <body></body>, предварительно обернув его в  <ul></ul> с добавлением класса элементам:

 


<ul class="tt-wrapper">

        <li><a class="tt-googl_plus" href="Ссылка"><span>Google Plus</span></a></li>

        <li><a class="tt-rss" href="Ссылка"><span>Rss</span></a></li>

        <li><a class="tt-twitter" href="Ссылка"><span>Twitter</span></a></li>

        <li><a class="tt-wikipedia" href="Ссылка"><span>Wikipedia</span></a></li>

        <li><a class="tt-wordpress" href="Ссылка"><span>WordPress</span></a></li>

        <li><a class="tt-you_tube" href="Ссылка"><span>You Tube</span></a></li>

</ul>

 

Далее нам остаётся прописать CSS стили. Они вписываются в самый конец основного файл всех стилей Вашего ресурса. В шаблонах WordPress таковым файлом является «style.css».

Все исходные файлы можно загрузить одним общим архивом нажав на кнопку «СКАЧАТЬ» рядом с демонстрацией всплывающих подсказок.

 

Всплывающие подсказки

Всплывающие подсказки

ДЕМО СКАЧАТЬ

 

Скажите друзья, какая всплывающая подсказка Вам понравилась больше всего?

На сегодня это всё, но не расстраивайтесь, впереди Вас ожидает много различных эффектов.

Чтобы их не пропустить, предлагаю подписаться на обновление блога и получать уведомление о выходе нового материала на Ваш адрес электронной почты.

До новых статей…

 

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Сергей Медведев
    Опубликовано: 25.01.2013 Ответить на сообщение

    Вот спасибочки Денис!
    Давно уже думал сделать что-то подобное! Твоя статья, как нельзя кстати!

    • Денис Черников
      Опубликовано: 25.01.2013 Ответить на сообщение

      Пожалуйста, Сергей! Прикручивайте на здоровье!

      • Сергей Медведев
        Опубликовано: 25.01.2013 Ответить на сообщение

        Можно и на ты!

        • Денис Черников
          Опубликовано: 25.01.2013 Ответить на сообщение

          Хорошо, Сергей! Просто я всех не упомню к кому на ты, а к кому на Вы.

  • Олег
    Опубликовано: 25.01.2013 Ответить на сообщение

    Мне третий вариант больше всего понравился.

    • Денис Черников
      Опубликовано: 25.01.2013 Ответить на сообщение

      Хороший выбор, Олег!

  • Любовь
    Опубликовано: 25.01.2013 Ответить на сообщение

    Здорово!
    К себе, наверное не заберу, но штука классная.
    Спасибо, Денис!
    А больше всего понравился вариант с кругляшками  — демо2

    • Денис Черников
      Опубликовано: 25.01.2013 Ответить на сообщение

      Пожалуйста, Любовь! А почему не заберёте?

      • Любовь
        Опубликовано: 25.01.2013 Ответить на сообщение

        Потому что у меня этих кнопок натыкано очень много — подарок разработчика шаблона Во-вторых, каждая из них и так уже подписана.
        Чтобы внедрить Ваше предложение, мне придется все менять. очень уж не хочется туда лезть и все переворачивать

        • Денис Черников
          Опубликовано: 25.01.2013 Ответить на сообщение

          Ну как знаете. Если надумаете, милости прошу.

  • Alex
    Опубликовано: 25.01.2013 Ответить на сообщение

    Интересное оформление. Мне понравился больше 1-й вариант.

    • Денис Черников
      Опубликовано: 25.01.2013 Ответить на сообщение

      Да, он не плох! У каждого есть своя изюминка.

  • alik
    Опубликовано: 30.01.2013 Ответить на сообщение

    привет. как я понял надо написать (то что ты написал), но в какой странице?
    и то что надо скачать куда надо воткнуть?
    у меня такой шаблон капризный что то не так сделаю,(это часто))) то сразу все исчезает, и меня это уже уыуодит ))
    шаблон fastfood от каких то братьев ;0)

    • Денис Черников
      Опубликовано: 30.01.2013 Ответить на сообщение

      head находится в index.php Вашего шаблона. И всё остальное там.

  • Александр
    Опубликовано: 22.11.2015 Ответить на сообщение

    БЛОГ БОМБОВСКИЙ АВТОР МОЛОДЕЦ ПОБОЛЬШЕ Б ТАКИХ

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.