Css фриланс всплывающая подсказка img. Как делается в html всплывающая подсказка? Создание класса tooltip
В данной статье я хочу обсудить несколько вариантов организации подобной фишки в любой верстке. Кстати, живой пример такой реализации уже имеется у меня на сайте. Если прокрутите до комментариев на этой странице и наведете на дату комментария, сразу точно станет понятно, о чем речь. Ну а если же комментариев еще нет, можете его заодно и оставить.
Я вижу два основных метода реализации всплывающей подсказки, это при наведении, он же и самый популярный, и менее популярный при клике на какой-либо элемент. Начнем естественно с появления подсказки при наведении курсора на элемент.
Я думал в данной статье начать с самого примитива, вывод подсказки с помощью title , который не получится как-либо оформить, однако я думаю его можно пропустить, так как это и так понятно. Если вышесказанное Вам не совсем понятно, думаю, после изучения видео об , все станет гораздо понятней.
Простой способ с оформлением, при наведении.
Здесь все не сложнее, чем в способе, который я пропустил. Только вместо атрибута title я буду использовать data-title и оформление с помощью стилей css. Собственно привожу ниже html-код:
/* Используем псевдоэлемент after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при наведении */ .hover:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при наведении на элемент плашка с подсказкой появилась */ .hover:hover:after{display: block;}
Здесь же хочу обратить Ваше внимание, что это только пример свойств оформления. Вы можете естественно оформить внешний вид плашки, как Вам угодно.
Всплывающая подсказка при наведении.
Это пожалуй самый популярный способ реализации данной возможности. По крайней мере я им пользуюсь чаще всего.
В данном примере так же не вижу ничего особенного, однако побольше, но и результат будет получше и без использования атрибута data-title . Контейнер в данном случае служит оболочкой для наших элементов, которые будут использованы для реализации подсказки. А так же сама плашка будет позиционироваться относительно контейнера.
/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:before {content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:after {content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при наведении */ .hover:hover + .hidden{display: block;}
Именно эти два варианта можно использовать у Вас на сайте для выведения всплывающей подсказки при наведении курсора.
Существуют еще два способа, однако они практически идентичны, за исключением того, что появление элемента происходить будет при клике по элементу, который всегда отображается на сайте.
Простой способ с оформлением, при клике.
В случае с кликом, код будет выглядеть абсолютно так же. Единственное, что для удобства я заменил класс некоторых элементов. А так же используется псевдокласс focus вместо hover . Еще здесь стоит отметить, что чтобы данный способ срабатывал, необходимо заменить на , то есть на гиперссылку.
?
Css код в этом случае аналогичен появлению плашки при наведении, только использованы для удобства другие классы. И для правильной работы меняем псевдокласс на focus .
/* Используем псевдокласс after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при клике */ .focus:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при клике на элемент плашка с подсказкой появилась */ .focus:focus:after{display: block;}
Как видите разницы практически нет.
Всплывающая подсказка при клике.
Этот способ при клике так же будет более актуален, если Вам требуется оформить подсказку немного лучше нежели это возможно в предыдущем варианте.
И собственно оформление плашки:
/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:before {content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:after {content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при клике */ .focus:focus + .hidden{display: block;}
Как Вы можете наблюдать ничего сложного нет. К тому же можно организовать изменения состояний, как по наведению, так и по клику. Хотя я честно говоря, не могу сказать насколько актуален способ по клику.
Существует так же имитация последнего примера с помощью , однако его использование мне кажется не совсем правильным именно для организации всплывающей подсказки у себя на сайте. Если Вы со мной категорически не согласны, добро пожаловать в комментарии.
Видео урок — Всплывающая подсказка без скриптов.
На этом у меня все. Всем удачи.
Влад Мержевич
В HTML уже есть глобальный атрибут title , который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается , но в некоторых случаях вполне достаточно обойтись и одним CSS.
В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content и брать значение текста из какого-либо атрибута через attr() . К сожалению, content не будет работать желаемым образом в сочетании с img , поэтому фотографии вставляются в элемент
Пример 1. Код HTML
HTML5 IE Cr Op Sa Fx
Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after , к которому добавляем content: attr(data-title) .
Photo::after { content: attr(data-title); }
Получится, что после содержимого элемента с классом photo будет выводиться текст из атрибута data-title , что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover .
Photo:hover::after { content: attr(data-title); }
Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).
Пример 2. Стиль подсказки
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки
Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).
Пример 3. Вывод подсказки внизу фотографии
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Вид всплывающей подсказки
К сожалению, свойство transition , с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after . Впрочем, если заменить этот псевдоэлемент на :after , то можно получить более-менее работающий вариант.
На этом уроке мы сделаем всплывающую подсказку при наведении на иконку на чистом CSS . Точно такой же принцип можно применить к картинке. Перейдите для просмотра демо страницы .
HTML разметка
Создадим список из пяти пунктов. Внутри каждого пункта поместим тег i с нужной иконкой, просто скопировав код конкретной иконки с сайта Font Awesome .
Под тегом иконки пропишем тег span с соответствующим коротким текстом-подсказкой.
Удобные номера
Кредитные карты
Душ в номере
Завтрак включен
Питомцы OK
После этого подключаем файл стилей - style.css . Меняем положение иконок из вертикального положения в горизонтальное.
Для этого родительскому контейнеру прописываем значение - flex .
Ul {
display: flex;
}
Раскрашиваем фоновую основу под иконками и цвет самих иконок.
Ul li {
background: #cecfcf;
color: #fff;
}
Размер иконки задается через размер шрифта.
Ul li {
font-size: 40px;
}
Внешний вид иконочного ряда уже сформирован.
При наведении курсора на иконку, меняется цвет иконки и вид курсора.
Ul li:hover {
color: #03a9f4;
cursor: pointer;
}
Всплывающая подсказка
При наведении на иконку, будет всплывать текстовая подсказка в прямоугольном блоке, в HTML разметке - это текст в теге span . Расположим подсказки выше иконок.
Ul li span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
}
Размеры боксов зададим следующие фиксированные размеры.
Ul li span {
width: 120px;
height: 24px;
}
Выравнивание текста по центру по вертикали и горизонтали.
Ul li span {
line-height: 24px;
text-align: center;
}
Цвет фона, текста и размер текста.
Ul li span {
background: #03a9f4;
color: #fff;
font-size: 14px;
}
Скругляем углы на 4 пикселя и делаем плавный переход при наведении.
Ul li span {
border-radius: 4px;
transition: .5s;
}
Всплывающая подсказка делается невидимой и прозрачной.
Ul li span {
opacity: 0;
visibility: hidden;
}
Псевдоэлемент::before
Для того, чтобы нарисовать небольшую стрелочку под блоком, мы будем использовать псевдоэлемент ::before , что на практике означает, что стрелочка реально отсутствует в HTML файле (пустой content ), а существует только в CSS файле. Стрелочка с направленным остриём на иконку - не что иное, как фигура квадрата 10x10 пикселей, повёрнутая на 45 градусов и прижатая к блоку span с отрицательным значением. В итоге квадрат трансформирован в треугольник и лежит на слое ниже z-index: -1 , чем его родитель тег span .
От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.
Стандартная подсказка
По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.
В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.
< img src = "tiger.jpg" title = "Это тигр" > |
Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:
Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.
Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.
Способ на чистом css
Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:
< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div > |
Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.
Итак, для начала опишем стили для контейнера. Относительное позиционирование нужно нам потому, что мы будем позиционировать абсолютно блок с поясняющим текстом, чтобы позиционирование происходило относительно родительского блока, а не всей страницы.
#tiger{ position: relative; display: inline-block; }
#tiger{ position : relative ; display : inline - block ; |
Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:
#tiger:hover:after { content: attr(data-name); position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; }
#tiger:hover:after { content : attr (data - name ) ; position : absolute ; left : 0 ; bottom : 0 ; background : rgba (5 , 13 , 156 , . 55 ) ; color : #fff; text - align : center ; font - family : cursive ; font - size : 14px ; padding : 3px 0 ; width : 100 % ; |
Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.
Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.
Способ 2. Чистый css и плавное появление
Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.
Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах
Итак, код этого примера будет немного отличаться, и это по той причине, что мы не будем использовать псевдоэлемент. Именно из-за него невозможно было применить плавные изменения. В этот раз код будет выглядеть так:
< div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" > Суматранскийтигр< / div > < / div > |
CSS код не претерпел каких-то огромных изменений:
#tiger2{ position: relative; display: inline-block; } #tiger2 .text { transition: all 0.6s; opacity: 0; position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; transform: scale(0); } #tiger2:hover .text{ opacity: 1; }
#tiger2{ position : relative ; display : inline - block ; #tiger2 .text { transition : all 0.6s ; transform : scale (0 ) ; #tiger2:hover .text{ opacity : 1 ; |
Убираем только свойство content, так как оно поддерживается лишь псевдоэлементами. Дописываем свойство transition, которое и создает плавные переходы состояний. Ну а opacity: 0 даст нашему блоку с подсказкой полную прозрачность, поэтому он не будет виден на странице.
При наведении на блок теперь достаточно вернуть нормальную прозрачность блоку с подсказкой. Готово. Можете проверить, элемент появляется плавно.
С помощью css3 можно скрыть элемент и по-другому. С помощью трансформаций, например. Замените полную прозрачность на вот такое свойство: transform: scale(0) и размер блока будет уменьшен до нулевого, так что его попросту не будет на экране. При наведении же на блок с картинкой следует вернуть нормальный размер вот так: transform: scale(1). В таком случае эффект появления будет смотреться еще красивее. Можете убедиться в этом сами.
Как видите, на css всплывающая подсказка также может появляться медленно с красивыми эффектами.
Другие способы
Еще больше возможностей вам может дать jQuery. С помощью этой библиотеки можно написать код для вывода подсказки как самостоятельно, так и найти какой-нибудь плагин, который уже реализует это дело.
Например, в фреймворке Bootstrap тоже есть много готовых компонентов и один из них, это как раз всплывающие подсказки. Вы можете посмотреть в документации к фреймворку примеры кода, которые позволяют создать эти самые подсказки, и использовать их. Необязательно подключать весь Bootstrap, можно вообще оставить только такой компонент, как подсказки (toolptips), скачать и подключить только его.
В общем, сегодня я показал вам способы на css, как сделать красивую подсказку с резким и плавным появлением, помимо этого в вашем арсенале есть Bootstrap и jQuery. Выбирайте что угодно и реализовывайте интересные и красивые подсказки на своих сайтах!
Сегодня мы будем создавать всплывающие подсказки на CSS. Всплывающие подсказки — это то, что можно увидеть при наведении курсора, например на ссылку, если в атрибуте title содержится ее описание.
Всплывающая подсказка может применяться как для ссылок, так и для изображений.
В неоформленном виде всплывающая подсказка выглядит вот так:
Всплывающая подсказка выводится стандартным системным методом с помощью атрибута title.
Стандартный код ссылки с всплывающей подсказкой без оформления:
Ссылка
Всплывающая подсказка CSS
Придать оформление всплывающей подсказке можно с помощью CSS. Мы разберем три варианта всплывающей подсказки на CSS .
К сожалению, нет CSS-«рецепта» в отношении оформления title, поэтому придется добавлять дополнительные атрибуты, прописывать для них оформление и добавлять их в код ссылки/изображения, для которого мы хотим сделать красивую всплывающую подсказку CSS .
В первом примере мы сделаем всплывающую подсказку CSS поверх изображения в самом низу.
Для этого мы будем использовать два атрибута: image, а для того, чтобы всплывающая подсказка работала, — ::after и data-text для вывода текста всплывающей подсказки.
CSS-стили для данного примера:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .image { display : inline-block ; position : relative ; } .image : hover :: after { content : attr (data-text) ; /* Выводим текст всплывающей подсказки*/ position : absolute ; left : 0 ; right : 0 ; bottom : 0px ; /* Положение всплывающей подсказки */ z-index : 1 ; /* Отображаем подсказку поверх других элементов */ background : rgba (0 , 255 , 102 , 0.6 ) ; /* Цвет (RGB) и степень его прозрачности */ color : #fff ; /* Цвет текста */ text-align : center ; /* Выравниваем текст по центру */ font-family : Arial, sans-serif ; /* Гарнитура шрифта */ font-size : 11px ; /* Размер текста подсказки */ padding : 5px 10px ; /* Поля */ border : 1px solid #333 ; /* Параметры рамки */ } |
Image { display: inline-block; position: relative; } .image:hover::after { content: attr(data-text); /* Выводим текст всплывающей подсказки*/ position: absolute; left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */ color: #fff; /* Цвет текста */ text-align: center; /* Выравниваем текст по центру */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ }
1 |
Результат:
Для ссылок такое оформление не подойдет, поэтому для них будем использовать немножко другие варианты.
Первый вариант будет выводить всплывающую подсказку над ссылкой.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .podskazka{ display : inline ; position : relative ; } .podskazka : hover : after { background : #333 ; background : rgba (204 , 102 , 0 , .8) ; border-radius : 5px ; bottom : 26px ; color : #fff ; content : attr (title) ; left : 20% ; padding : 5px 15px ; position : absolute ; z-index : 98 ; width : auto ; } .podskazka : hover : before { /* Добавляем стрелочку внизу блока всплывающей подсказки */ border : solid ; border-color : #cc6600 transparent ; border-width : 6px 6px 0 6px ; bottom : 20px ; content : "" ; left : 50% ; position : absolute ; z-index : 99 ; } |
Podskazka{ display: inline; position: relative;}.podskazka:hover:after{ background: #333; background: rgba(204,102,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: auto;}.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */ border: solid; border-color: #cc6600 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99;}
Ссылка
И последний вариант — вывод всплывающей подсказки под ссылкой. Вариант похож на предыдущий, только вывод всплывающей подсказки тут снизу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .tooltip { position : relative ; /* Делаем элемент родительским для всплывающих подсказок */ cursor : help ; } .tooltip span { position : absolute ; /* Выводим элемент из потока */ margin-left : -30000px ; /* И прячем далеко за краем экрана */ background-color : rgba (0 , 0 , 153 , .8) ; /* Фон всплывающего блока*/ color : #fafafa ; /* Цвет текста */ padding : 10px ; /* Отступы */ -webkit-border-radius: 5px ; /* Закругляем уголки */ -moz-border-radius: 5px ; -khtml-border-radius: 5px ; border-radius : 5px ; } .tooltip : hover span { /* При наведении */ margin-left : 0 ; /* Возвращаем из далекого заэкранного края блок на место */ width : 250px ; /* Задаем ширину */ z-index : 1000 ; /* Помещаем на самый верх */ top : 30px ; /* Отступ сверху */ left : 20px ; /* Отступ слева */ } .tooltip span: after { content : "" ; /* Добавили контент */ width : 0 ; /* Спрятали его, превратив в 0 */ height : 0 ; border-bottom : 10px solid #000099 ; /* Нижним бордером задаем цвет и высоту треугольника */ border-right : 30px solid transparent ; /* Правым - ширину треугольника вправо */ position : absolute ; /* Позиционируем относительно родительского блока */ top : -10px ; left : 10px ; } |
Tooltip { position: relative; /* Делаем элемент родительским для всплывающих подсказок */ cursor: help;}.tooltip span { position: absolute; /* Выводим элемент из потока */ margin-left: -30000px; /* И прячем далеко за краем экрана */ background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/ color: #fafafa; /* Цвет текста */ padding:10px; /* Отступы */ -webkit-border-radius: 5px; /* Закругляем уголки */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}.tooltip:hover span { /* При наведении */ margin-left: 0; /* Возвращаем из далекого заэкранного края блок на место */ width: 250px; /* Задаем ширину */ z-index: 1000; /* Помещаем на самый верх */ /* Позиционируем относительно родительского блока */ top:30px; /* Отступ сверху */ left:20px; /* Отступ слева */ }.tooltip span:after{ content: ""; /* Добавили контент */ width:0; /* Спрятали его, превратив в 0 */ height:0; border-bottom: 10px solid #000099; /* Нижним бордером задаем цвет и высоту треугольника */ border-right: 30px solid transparent; /* Правым - ширину треугольника вправо */ position: absolute; /* Позиционируем относительно родительского блока */ top:-10px; left:10px;}