Простые подсказки на CSS3

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

demosourse

“Зачем мне нужны CSS подсказки?”

Конечно же вы можете использовать HTML атрибут title, для того чтобы организовать систему подсказок. Дело в том, что по умолчанию данные элементы нельзя стилизовать. Если вы хотите предоставлять своим пользователям красивые подсказки, то эта статья для вас.

Что и как мы будем делать

Наверняка данная техника вам знакома. Я буду использовать значения позиционирования relative и absolute, для того чтобы расположить подсказки. В этой статье я не пытаюсь изобрести колесо, просто пытаюсь создать красивые подсказки на CSS3.

Ниже вы можете увидеть структуру (прошу заметить, что я использую псевдо элементы :before и :after):

Теперь я бы хотел перечислить технологии, которые использовал:

  • Градиент
  • Тень
  • Псевдо элементы

HTML

<a href="#" class="tooltip">
  ваш текст
  <span>ваша подсказка</span>
</a>

Почему ссылка?

Данное решение принято только по той причине, что нам надо добиться совместимости с IE6. Данный браузер зачастую не понимает псевдо класс :hover.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  $(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {
      $('.tooltip').mouseover(function(){
            $(this).children('span').show();
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });
</script>

CSS

.tooltip
{
  position: relative;
  background: #eaeaea;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}

Поддержка браузеров

Данный код будет работать в IE6 и IE7, но возможны некоторые искажения в отображении.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/css3-tooltips
Перевел: Станислав Протасевич
Урок создан: 1 Мая 2011
Просмотров: 32389
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 1 Мая 2011 10:59
    user46577
    Первый, спасибо за статью)
    • 1 Мая 2011 11:03
      mikael1018
      Надоели с "Первыми"! От этого вы крутыми не будете! Подсказки очень крутые! Но опять страдает кроссбраузерность, поэтому буду использовать аналог на jQuery... Хотя на последних браузерах пойдет
      • 2 Мая 2011 10:31
        user46577
        первый раз и первый пост на этом сайте написал и уже надоел, странно
        • 2 Мая 2011 15:15
          rubyx
          ну не обижайся:) все мы иногда где-то дети ещё))
          • 2 Мая 2011 21:18
            Serpanok
            да... каждому своё
    • 1 Мая 2011 22:37
      Zedamin
      Возьми пирожок с полки
  • 1 Мая 2011 12:19
    rubyx
    интересно можно заменить эти
    (rgba(255,255,255,.5)
    на
    #000050
    краски?...
    • 1 Мая 2011 12:35
      m_hamlet
      По-моему, да...
      • 1 Мая 2011 16:36
        djvergon
        а по моему нет, а знаете почему: #000050 - цвет без прозрачности (rgba(255,255,255,.5) - цвет с прозрачностью (.5) и потом цвета то разные белый и синий
        • 4 Мая 2011 14:48
          m_hamlet
          Цвета разные, rubyx просто как пример написал #000050. А прозрачность можно сделать и с opacity
          • 4 Мая 2011 16:47
            djvergon
            невсегда если задовать через opacity прозрачным будет весь блок а если через rgba(255,255,255,.5) то прозрачным будет только фон а всё остальное будет видно нормально
    • 1 Мая 2011 16:38
      egor911
      можно ну прозрачности не будет
      • 2 Мая 2011 15:12
        rubyx
        тогда #000050,5 во:) пусть останется задача для разработчиков, согласитесь чем короче скрипт тем быстрее всё открывается и работает. Удачи разработчикам в этом труде! :)
  • 1 Мая 2011 12:22
    rubyx
    Ещё скажу, если у меня предупреждении 1 из за аваторки, то это я на сене! :) С 1 Мая всех.
  • 1 Мая 2011 12:29
    rubyx
    Мне очень хотелось бы знать кто сейчас использует браузер IE6??? он имелся в винд98 и в первой ХР... отзовитесь любители ослика шестёрки IE6 ? :)
  • 1 Мая 2011 12:45
    notbot
    Отлично!
  • 1 Мая 2011 15:03
    Михаил Хихлухо
    Спасибо за статью, у меня возник вопрос...я сделал меню для сайта а :hover в осле не работает... как можно скриптом оживить это дело??? примерно как в этом скрипте?
    • 1 Мая 2011 15:57
      rekon
      <!--[if IE]> ... code for IE... <![endif]-->
  • 27 Июня 2011 15:02
    NeHaLeM
    а как треугольники делают?
  • 15 Июля 2011 11:52
    selgivel
    Здравствуйте, а как можно добавить подсказку к: <map name="Map" id="Map"> <area shape="poly" coords="386,83,379,89,376,81" href="#" alt="точка" class="tooltip"/>
  • 26 Августа 2011 22:02
    Sergant4x4
    в исходниках даны разные цвета на подсказки... как их использовать? т.е. как включить чтоб были или Йелоу, или Нави??
  • 12 Февраля 2012 22:37
    Rinat1994
    ВНИЗУ СПРАВА СМАЙЛИК!!! Я ОДИН ЭТО ЗАМЕТИЛ??? КЛИКНИТЕ!!!
    • 28 Апреля 2012 11:15
      hrach333
      Классно а это во всех страницах или только тут.
  • 23 Августа 2012 06:31
    axeland1
    Спасибо.
  • 22 Сентября 2013 23:54
    bybad
    Почему то не работает в Google Chrome. В остальных браузерах нормально - подскажите в чём дело ?
^ Наверх ^