DirectoryWeb
  • Главная
  • Услуги
  • Контакты
  • Новости
  • Правила
  • Вход / Регистрация
Создание сайтов

Создание сайтов

  • Анализ конкурента (донора) и рекомендации
  • Подбор и реализация дизайна под CMS
  • Установка на хостинг (сервер)
  • Наполнение
  • Оптимизация
  • Дополнительные услуги
Продвижение

Продвижение

  • Аудит и рекомендации
  • Семантическое ядро
  • Крауд маркетинг
  • Стратегия продвижения бренда
  • Продвижение соц сетей
  • Дополнительные услуги
SERM

SERM

  • Аудит и рекомендации
  • Семантическое ядро репутационных запросов
  • Построение стратегии продвижения
  • Стратегия продвижения репутации бренда
  • Крауд маркетинг
  • Дополнительные услуги
Оставить заявку

Оставить заявку

Не нашли подходящую услугу? Мы выполняем все типы работ по созданию сайтов и продвижению компаний в сети.
    DirectoryWeb » Статьи » Сайтостроение » Как сделать всплывающие подсказки на CSS

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

Статьи / Сайтостроение

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

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


1) Добавим следующий код в начало html файла или же вынести в таблицу каскадных стилей:

a.tt{position:relative;z-index:24;color:#3CA3FF;font-weight:bold;text-decoration:none;}a.tt span{ display: none; } /*background:; ie hack, something must be changed in a for ie to execute it*/    a.tt:hover{ z-index:25; color: #aaaaff; background:;}    a.tt:hover span.tooltip{    display:block;  position:absolute;    top:0px; left:0;    padding: 15px 0 0 0;    width:200px;    color: #993300;    text-align: center;    filter: alpha(opacity:90);    KHTMLOpacity: 0.90;    MozOpacity: 0.90;    opacity: 0.90;    }    a.tt:hover span.top{    display: block;    padding: 30px 8px 0;    background: url(bubble.gif) no-repeat top;    }    a.tt:hover span.middle{ /* different middle bg for stretch */    display: block;    padding: 0 8px;     background: url(bubble_filler.gif) repeat bottom;     }    a.tt:hover span.bottom{    display: block;    padding:3px 8px 10px;    color: #548912;    background: url(bubble.gif) no-repeat bottom;    }  


2) Код, который показывает как вставлять подсказки в страницу.

<a href="#" class="tt">    Тут текст термина (который нуждается в подсказке)    <span class="tooltip">    <span class="top">    </span>    <span class="middle">    Тут текст всплывающей подсказки    </span>    <span class="bottom">    </span>    </span>    </a>


Вот и все! Подсказки готовы исходники можно скачать ниже!

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

2-07-2012, 09:38 Неизвестно
.
example.zip " class="btn btn-primary w-100 f90 fw7" target="_blank" rel="nofollow noopener external" itemprop="downloadUrl">
Скачать

Настройка скриптов
  • DirectoryWeb
  • 02.07.2012
  • 1 5 539
  • 0
    • 3,7
    • 1
    • 2
    • 3
    • 4
    • 5
Выпадающая форма для входа и регистрации
Выпадающая форма для входа и регистрации
11-07-2013, 17:39, Сайтостроение
Как сделать вертикальное меню для сайта
Как сделать вертикальное меню для сайта
15-04-2012, 21:21, Сайтостроение
Как уменьшить размер CSS файла? Оптимизация CSS кода.
Как уменьшить размер CSS файла? Оптимизация CSS кода.
29-09-2011, 17:48, Сайтостроение
Анимированное вертикальное меню
Анимированное вертикальное меню
13-04-2013, 18:19, Сайтостроение
Как правильно закрыть сайт от старых версий IE 5.5-6
Как правильно закрыть сайт от старых версий IE 5.5-6
20-10-2011, 22:55, Сайтостроение
Как сделать всплывающее сообщение вверху сайта на jQuery
Как сделать всплывающее сообщение вверху сайта на jQuery
7-11-2012, 11:55, Сайтостроение

Твой комментарий..

Кликните на изображение чтобы обновить код, если он неразборчив
  • Магазин
    • Программы
    • Скрипты
  • Скрипты
    • Аналитика
    • Бонусники
    • Браузерные игры
    • Доски обявлений
    • Обменники
    • Казино
    • Каталоги
    • Конструкторы сайтов
    • Облачные майнинги
    • Рекламные сервисы
    • Социальные сети
    • Экономические игры
    • HTML шаблоны
    • Чаты
    • Хостинги
    • HYIP, MLM, МММ
    • Фриланс биржи
    • Разное
  • Телеграм Боты
  • Программы
  • Интернет магазины
  • Android, iOS приложения
  • Статьи
    • Маркетплейсы
    • Безопасность в сети
    • Заработок в интернете
    • Сайтостроение
    • Оптимизация сайтов
    • Обучение
    • Криптовалюты
    • Новости
    • Разное
    • Новости сайта
Скрипт обменного пункта Premium Exchanger
Подробнее
Скрипт обменного пункта Premium Exchanger
Скрипт игры азартной игры с выбором шанса победы 1Dice
Подробнее
Скрипт игры азартной игры с выбором шанса победы 1Dice
Скрипт поиска и парсинга video phpVibe 3.4 Nulled
Подробнее
Скрипт поиска и парсинга video phpVibe 3.4 Nulled
Скрипт экономической онлайн игры Zoo-Game
Подробнее
Скрипт экономической онлайн игры Zoo-Game
Уникальный скрипт хайпа Fair-Game
Подробнее
Уникальный скрипт хайпа Fair-Game
У 60% пользователей соцсетей в РФ хоть раз взламывали аккаунт
Подробнее
У 60% пользователей соцсетей в РФ хоть раз взламывали аккаунт
Loading...

Нашли ошибку?
Вы можете сообщить об этом администрации.
Выделив текст нажмите CTRL+Enter

Самые просматриваемые за последнее время

Как защитить сайт на CMS от взлома

Как защитить сайт на CMS от взлома

  • DirectoryWeb
  • 25.02.2023
  • 1 223
  • 0
    • 3
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт конструктор адаптивных лендингов

Скрипт конструктор адаптивных лендингов

  • DirectoryWeb
  • 21.02.2023
  • 1 217
  • 0
    • 3
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт аренды жилья Vrent 3.3

Скрипт аренды жилья Vrent 3.3

  • DirectoryWeb
  • 24.02.2023
  • 1 211
  • 0
    • 3,6
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт криптовалютной инвестиционной системы OnlineTrader v5.0.0

Скрипт криптовалютной инвестиционной системы OnlineTrader v5.0.0

  • Edvins
  • 05.03.2023
  • 1 208
  • 0
    • 4
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт конструктор "Калькулятор PRO" для Битрикс

Скрипт конструктор "Калькулятор PRO" для Битрикс

  • DirectoryWeb
  • 26.02.2023
  • 1 195
  • 0
    • 4,3
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт телеграм бота обменника криптовалюты

Скрипт телеграм бота обменника криптовалюты

  • DirectoryWeb
  • 23.02.2023
  • 1 177
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт портала под партнерку займов v1.0.0

Скрипт портала под партнерку займов v1.0.0

  • Beri.money
  • 12.03.2023
  • 1 175
  • 1
    • 3
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт управления проектами Grow CRM v2.1

Скрипт управления проектами Grow CRM v2.1

  • Edvins
  • 07.03.2023
  • 1 170
  • 0
    • 4
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт сайта с вирусным контентом King Media 8.0

Скрипт сайта с вирусным контентом King Media 8.0

  • DirectoryWeb
  • 14.03.2023
  • 1 144
  • 0
    • 0
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..

Высший рейтинг за последнее время

Скрипт телеграм бота обменника криптовалюты

Скрипт телеграм бота обменника криптовалюты

  • DirectoryWeb
  • 23.02.2023
  • 1 177
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт конструктор "Калькулятор PRO" для Битрикс

Скрипт конструктор "Калькулятор PRO" для Битрикс

  • DirectoryWeb
  • 26.02.2023
  • 1 195
  • 0
    • 4,3
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт обменного пункта Premium Exchanger

Скрипт обменного пункта Premium Exchanger

  • DirectoryWeb
  • 18.03.2023
  • 1 85
  • 0
    • 4,3
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Программа MultiSapp Multi WhatsApp Manager v1.2

Программа MultiSapp Multi WhatsApp Manager v1.2

  • Edvins
  • 06.03.2023
  • 1 134
  • 0
    • 4,3
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт криптовалютной инвестиционной системы OnlineTrader v5.0.0

Скрипт криптовалютной инвестиционной системы OnlineTrader v5.0.0

  • Edvins
  • 05.03.2023
  • 1 208
  • 0
    • 4
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт управления проектами Grow CRM v2.1

Скрипт управления проектами Grow CRM v2.1

  • Edvins
  • 07.03.2023
  • 1 170
  • 0
    • 4
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт аренды жилья Vrent 3.3

Скрипт аренды жилья Vrent 3.3

  • DirectoryWeb
  • 24.02.2023
  • 1 211
  • 0
    • 3,6
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
HTML шаблон сельскохояйственной тематики Bio Crop

HTML шаблон сельскохояйственной тематики Bio Crop

  • Edvins
  • 06.03.2023
  • 1 89
  • 0
    • 3,3
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт повышения продаж на сайте

Скрипт повышения продаж на сайте

  • DirectoryWeb
  • 23.02.2023
  • 1 120
  • 0
    • 3,1
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..

Самый топ

Ссылочное продвижение сайта в 2023?

Ссылочное продвижение сайта в 2023?

  • DirectoryWeb
  • 19.09.2011
  • 1 10 400
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Как сделать шаблон DLE  уникальным для поисковиков

Как сделать шаблон DLE уникальным для поисковиков

  • DirectoryWeb
  • 21.09.2011
  • 1 10 488
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Компания Yahoo закрывает Интернет-поисковик AltaVista

Компания Yahoo закрывает Интернет-поисковик AltaVista

  • DirectoryWeb
  • 01.07.2013
  • 1 2 773
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Урок по созданию установщика  install.php

Урок по созданию установщика install.php

  • DirectoryWeb
  • 24.09.2011
  • 1 10 113
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Как закрыть ссылки и счётчики от индексации

Как закрыть ссылки и счётчики от индексации

  • DirectoryWeb
  • 22.10.2011
  • 1 15 247
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Биз Стоун предложил ввести платную подписку на Facebook

Биз Стоун предложил ввести платную подписку на Facebook

  • DirectoryWeb
  • 23.07.2013
  • 1 3 272
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Пиратское видео в сети ВКонтакте начнут удалять

Пиратское видео в сети ВКонтакте начнут удалять

  • DirectoryWeb
  • 23.07.2013
  • 1 3 115
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Почему опасно включать параметр register_globals.

Почему опасно включать параметр register_globals.

  • DirectoryWeb
  • 11.12.2012
  • 1 5 523
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Основы переменных в PHP

Основы переменных в PHP

  • DirectoryWeb
  • 05.10.2016
  • 1 2 329
  • 0
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..

Последние комментарии

MakarZzz При запуске пишет "Невозможно запустить это приложение на вашем пк"
Beri.money Скрипт мой, поддержку по нему оказываю только я. Вот список партнерок которые проверены временем и
Виктор Не входит в личный кабинет в Админку, что может быть? Не могу полностью протестировать, завязка с
Полезные ссылки
  • О проекте
  • Наши контакты
  • Администрация
Информация
  • Условия сделки
  • Способы оплаты
  • Поддержка / F.A.Q
  • Онлайн документация
  • Статистика сайта
  • Список пользователей
Услуги/Работа
  • Сайт под ключ
  • Баннеры под заказ
  • Оптимизация сайта
  • Обновление сайта
  • Консультация/поддержка
  • Хостинг/Домены/Сервера
Заказ
Быстрый вход

Используйте социальные сети для быстрой регистрации и авторизации.

ВКонтакте
Создать аккаунт / Регистрация
Авторизация

Я забыл свой пароль