ГлавнаяCSS, JQuery, JavaScript › Как сделать Анимированные Всплывающие Подсказки?


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


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

Приветствую всех читателей – 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».

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

 

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

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

ДЕМО СКАЧАТЬ

 

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

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

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

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

 

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




15 комментариевА что думаете Вы?

  1. Сергей Медведев

    Вот спасибочки Денис!

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Сергей Медведев ответил:

    Можно и на ты! :)

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  2. Олег

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Любовь

    Здорово!

    К себе, наверное не заберу, но штука классная.

    Спасибо, Денис!

    А больше всего понравился вариант с кругляшками :)  — демо2

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Любовь ответил:

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

    Чтобы внедрить Ваше предложение, мне придется все менять. очень уж не хочется туда лезть и все переворачивать :)

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  4. Alex

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  5. alik

    привет. как я понял надо написать (то что ты написал), но в какой странице?

    и то что надо скачать куда надо воткнуть?

    у меня такой шаблон капризный что то не так сделаю,(это часто))) то сразу все исчезает, и меня это уже уыуодит ))

    шаблон fastfood от каких то братьев ;0)

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  6. Александр

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

    [Ответить]

Оставить комментарий!

Вверх