Всплывающие подсказки css: Всплывающая подсказка на CSS | htmlbook.ru – Всплывающая подсказка с помощью CSS — Вебджем.рф

Содержание

Оформление всплывающих подсказок — всплывающие подсказки CSS

Оригинальное оформление всплывающих подсказок

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

Оригинальные примеры оформления всплывающих подсказок смотрите ниже:

Посмотреть примерСкачать

Также хочу обратить ваше внимание на следующие статьи, где также есть всплывающие подсказки:

Посмотрим подробнее | Оформление всплывающих подсказок

HTML часть

Давайте рассмотрим на примере «Блока».

Для начала между тегами <head></head>

подключаем файл стилей:

1	<link rel="stylesheet" type="text/css" href="css/tooltip-box.css" />

Где окончание «-box» (например, «-flip» или «-line») это и есть тот файл стилей, который соответствует выбранному эффекту.

Далее, пока что не совсем понятный, код:

1	<p>... Текст ... <span><span>ключевое слово</span><span><span>... Текст во вслывающем окне ...</span></span></span>... Текст ...</p>

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

CSS часть

Хорошо, с HTML разобрались. Но что же находится в CSS?

Опять же посмотрим для примера «Блок»:

.tooltip {
    display: inline;
    position: relative;
    z-index: 999;
}
 
/* Выделение "ключевого слова" */
 
.tooltip-item {
    color: #2fa0ec;
    cursor: pointer;
    z-index: 100;
    position: relative;
    display: inline-block;
    font-weight: 700;
    -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
 
.tooltip:hover .tooltip-item {
    color: #fff;
    -webkit-transform: translate3d(0,-0.5em,0);
    transform: translate3d(0,-0.5em,0);
}
 
/* Подсказка */
 
.tooltip-content {
    position: absolute;
    z-index: 99;
    width: 360px;
    left: 50%;
    margin-left: -180px;
    bottom: -5px;
    text-align: left;
    background: #2fa0ec;
    opacity: 0;
    font-size: 0.75em;
    line-height: 1.5;
    padding: 1.5em;
    color: #fff;
    border-bottom: 65px solid #2a3035;
    cursor: default;
    pointer-events: none;
    border-radius: 5px;
    font-family: 'Indie Flower', cursive;
    webkit-transform: translate3d(0,-0.5em,0);
    transform: translate3d(0,-0.5em,0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}
 
.tooltip-content a {
    color: #32434f;
}
 
.tooltip-text {
    opacity: 0;
    -webkit-transform: translate3d(0,1.5em,0);
    transform: translate3d(0,1.5em,0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}
 
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-text {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Самое сложное здесь — это свойство transform. Но если вы изучали уроки по CSS преобразованиям

, то ничего сложного для вы здесь не заметите.

Вывод

Еще один набор оригинально оформленных всплывающих подсказок для вашего сайта. Смело используйте их у себя на сайте!

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Всплывающие подсказки в 4 версиях CSS

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

Также они используются для отображения подписей к изображениям и предоставляют полезную информацию для ссылок или значения слова. Где задействованы разные стили и позиции, которые несут различные типы контента, включая текст, HTML, а также может быть изображения или видео ролик. Основном подсказки не сложно создаются при помощи HTML и CSS, где не нужно подключать библиотеки или скрипты.

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

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

Четыре всплывающие подсказки при помощи CSS3

Если подробно рассмотреть CSS-класс podskazka-kuledsag, который отвечает за следующие действия.

1. Скрывает текст подсказки;
2. Стилизует текст всплывающей подсказки и устанавливает его абсолютное положение;
3. Создает закругленный угол вокруг текста всплывающей подсказки с помощью атрибута border-radius;

Добавляет к нему основные стили, это ширина 218px, цветовая палитра фона, белый цвет текста на темно прозрачном фоне, центрированный текст, где идут отступы в 2 пикселя и непрозрачность редактируем, ведь значение .5 поставлено по умолчанию, хотя на светлом сайте можно сделать прозрачнее.

Установка:

HTML

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

Код

<ul>
 <li>Подсказка появится на
 верху
 Здесь идет скрытый текст под номером один от сайта zornet.ru
 
 </li>
 <li>Подсказка появится на
 левой стороне
 Теперь видим подсказку с левой стороны.
 
 </li>
 <li>Подсказка появится на
 левой стороне
 Оригинальный стиль курсора мыши при наведении CSS от сайта zornet.ru
 
 </li>
 <li>Подсказка появится на
 правой стороне
 Саму подсказку по знакам редактируем в прикрепленной CSS
 
 </li>
</ul>

CSS

Здесь идет несколько основных CSS-класса, который будут создавать всплывающее окна с описанием по 4 основным сторонам на выбор. Ведь CSS-класс всплывающей подсказки будет стилизовать текст родительского элемента span.

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

Код

.vanusemaled {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #565252;
  color: #0d8c29;
  cursor: pointer;
}

.vanusemaled .podskazka-kuledsag {
  visibility: hidden;
  position: absolute;
  width: 218px;
  background-color: #464242;
  color: #f6f7f6;
  text-align: center;
  padding: 3px;
  border-radius: 7px;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s;
}

.vanusemaled:hover .podskazka-kuledsag {
visibility: visible;
opacity: 1;
}

.vanusemaled-top {
bottom: 86%;
margin-left: -58px;
}

.vanusemaled-left {
top: -5px;
right: 128%;
}

.vanusemaled-bottom {
left: 20%; top: 120%;
}

.vanusemaled-right {
top: -5px;
left: 130%;
}

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

Здесь уже можете выставить положение выбранной подсказки с любой стороны, так как она ставится вручную, где делается под информационное сопровождение. И не нужно забывать, что сами меняем стиль и внешний вид под оформление пользовательского интерфейса, где только меняем свойства в CSS.

Демонстрация

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

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

Демо

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

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

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

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

СКАЧАТЬ

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

Время чтения: 2 мин.
Еще один урок по поводу всплывающих подсказок. Но в этом уроке мы не будем использовать jQuery. А, значит, мы не будем так сильно нагружать сайт и он будет загружаться на порядок быстрее. Как уже говорилось в прошлых уроках, подсказки позволяют сократить место текст на странице, расположив его более компактно.

Похожие уроки про всплывающие подсказки:
Пример можно увидеть здесь:
Посмотреть примерСкачать
HTML часть
Необходимо скачать и подключить библиотеку Hint.css(она находится здесь):
1
<link rel="stylesheet" href="hint.css">
Сейчас достаточно лишь прописать атрибут data-hint для тега , внутри которого расположить текст, при наведении на который будет появляться подсказка:
1 2 3 4
... dui magna vulputate massa, euismod luctus metus eros ut velit. Fusce non mattis odio. ...
CSS часть
Когда пользователь просматривает странице, то вряд ли он будет наводить курсор мыши на отдельные слова. Поэтому слова с подсказками лучше всего выделить соответствующим образом(например сделать их жирным цветом или курсивом):

1 2 3 4 5 6 7 8
span[data-hint] { border-bottom: 1px dotted #aaa; /* здесь задаете стиль для слова с подсказкой */ } span[data-hint]:hover { cursor: pointer; /* здесь задаете стиль для слова с подсказкой при наведении */ }
Становится понятно, если добавить точечное подчеркивание для слов с подсказками:

Вывод
Классные подсказки, которые не нагружают сайт, так как не испольуют jQuery.
Успехов!

Всплывающие подсказки css: Всплывающая подсказка на CSS | htmlbook.ru – Всплывающая подсказка с помощью CSS