Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

Часто спрашивают, какой самый простой способ реализации подсказок к ссылкам. Самый простой, это не особо заморачиваясь по поводу внешнего вида подсказок, использовать встроенные средства браузеров, прописывая атрибут title=”” в ссылках.
В то же время существует масса других способов создания простых всплывающих подсказок, о некоторых из них я писал ранее, да и в «интернетах» материала по этой теме не мало. Сегодня, поделюсь ещё одним, очень простым решением, для создания оформленных подсказок к ссылкам, не используя javascript, построенных исключительно на CSS3 и HTML5.
В данном методе, в общем-то, нет ничего нового, некоторые свойства появились ещё в CSS2, а вот используемый в примере атрибут data-tooltip="", является частью HTML5. Особо подробно весь механизм расписывать нет надобности, непосредственно в коде CSS, прописал краткие комментарии к основным свойствам.

Вариант 1

Ссылка с подсказкой в Html будет выглядеть следующим образом:

<a href="#" data-tooltip="Простая подсказка на CSS3">ссылка</a>

Вариант 2

Не ожидал, что сразу после публикации статьи у читателей возникнут некоторые вопросы, точнее один, но очень даже по делу. Сначала вопрос показался мне каким то сумбурным (вот и сам вопрос), но потом я подумал, почему бы и нет, ситуации бывают разные и, порой возникает необходимость разместить в подсказке более объёмную информацию. С первым вариантом, такая схема не прокатывала, при размещении в подсказке длинного текста, она(подсказка) вытягивалась по горизонтали и получалась не очень эстетичная картина. Можете проверить в первом варианте, добавив пару строк в подсказку.
Так вот, поставил задачу исправить ситуацию, т.е. сделать так, чтобы при добавлении длинного текста, тело оставалось в размерах заданной ширины, и автоматом осуществлялся перенос строк, и сделать это, без нагромождения дополнительного кода в css
Особо мудрить и выдумывать не пришлось, всё давно и хорошо проработано, достаточно было изменить некоторые свойства для элемента data-tooltip и всё.
Собственно, что из всего этого получилось, можете посмотреть на живом примере, а нажав на пункт меню «CSS» в редакторе, увидите весь расклад по стилям, с краткими пояснениями.

Сравнив оба варианта, очень легко разобраться, понять разницу и сам принцип работы данного метода. На мой взгляд, второй вариант, получился проще и к тому же более функциональным. Спасибо NeedHate за его вопрос, не устану повторять — Вместе всё у нас получится ))).
Работает метод во всех браузерах, даже IE8, пусть в силу своей убогости и проигнорировав свойство border-radius(скругление углов), что совсем не критично, выдаёт подсказки в лучшем виде.
Надеюсь, этот простенький сниппет, кому-нибудь пригодится в качестве шпаргалки, а появятся вопросы, или новые идеи в тему, пишите в комментариях, обязательно рассмотрим и обсудим.

С уважением, Андрей

Всего комментариев: 22

  • NeedHate: 11 февраля, 2014 в 17:54

    Как сделать, чтобы подсказка была более адоптивной. Если там, к примеру, текст зашкаливает влево. Как сделать, чтобы он ровнялся по вертикали, а не по горизонтали?

    Ответить
    • driver: 11 февраля, 2014 в 20:17

      Не тот случай и обрабатываемый атрибут, это короткая подсказка, а не всплывающий блок с развернутым описанием. Для реализации того что вы хотите существуют другие методы: вот или вот, и ещё: Тынц…

      Ответить
  • NeedHate: 11 февраля, 2014 в 19:20

    Ой, даже не так… как можно сделать его более адоптивным под количество символов… наводим на картинку, а ее содержание (в текстовом формате) отображается в соотношении к размеру картинки… интересно, я правильно всё спросил?

    Ответить
    • driver: 12 февраля, 2014 в 03:57

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

      Ответить
  • NeedHate: 12 февраля, 2014 в 14:30

    Продолжаем совершенствоваться:
    1. Изначальный вариант.
    2. Модифицированный.
    Обратите внимание на левую колонку. В модифицированном варианте сбиваются настройки «ссылки». Как можно «навязать» нужному, а то, что было — оставалось прежним?
    Скорее всего в моем моде я «начудил», но подскажите, как исправить?

    Ответить
    • driver: 12 февраля, 2014 в 16:45

      Уберите в css у ссылок a display: inline-block; position: relative; и всё вернётся на свои места. Ошибка в том, что вы определяете эти свойства для всех ссылок шаблона. Если вы хотите привязать подсказки к определенным ссылкам, нужно использовать атрибут data-tooltip, и соответственно в css, для таких ссылок прописать нужные свойства, всё в статье и в примере расписано.
      Например у вас в сайд-баре ссылка такого вида

      <a href=”http://teplodoma.ru/services/bath-in-bath/” style=”color: #6B8E23;” rel=”nofollow”><img width=”35″ class=”alignleft size-full wp-image-2194″ title=”Ванна в ванну” alt=”” style=”float: left;” src=”http://teplodoma.ru/wp-content/uploads/2013/08/vanna-vstavka.png”><strong>ВАННА В ВАННУ</strong></a>
      <a href=”http://teplodoma.ru/services/bath-in-bath/” style=”color: #6B8E23;” rel=”nofollow”><img width=”35″ class=”alignleft size-full wp-image-2194″ title=”Ванна в ванну” alt=”” style=”float: left;” src=”http://teplodoma.ru/wp-content/uploads/2013/08/vanna-vstavka.png”><strong>ВАННА В ВАННУ</strong></a>

      Добавляете атрибут data-tooltip с текстом выводимой подсказки и всё. Ссылка примет такой вид:

      <a href=”http://teplodoma.ru/services/bath-in-bath/” data-tooltip=”Здесь размещаете текст вашей посказки, краткое описание продукта и т.д.” style=”color: #6B8E23;” rel=”nofollow”><img width=”35″ class=”alignleft size-full wp-image-2194″ title=”Ванна в ванну” alt=”” style=”float: left;” src=”http://teplodoma.ru/wp-content/uploads/2013/08/vanna-vstavka.png”><strong>ВАННА В ВАННУ</strong></a>
      <a href=”http://teplodoma.ru/services/bath-in-bath/” data-tooltip=”Здесь размещаете текст вашей посказки, краткое описание продукта и т.д.” style=”color: #6B8E23;” rel=”nofollow”><img width=”35″ class=”alignleft size-full wp-image-2194″ title=”Ванна в ванну” alt=”” style=”float: left;” src=”http://teplodoma.ru/wp-content/uploads/2013/08/vanna-vstavka.png”><strong>ВАННА В ВАННУ</strong></a>

      Но чтобы подсказки заработали в ваш файл стилей .css не забудьте добавить правила для формирования подсказок, как показано в примере. Не все, а только относящиеся к селектору a[data-tooltip]
      Ну и, чтобы совсем отмести вопросы, вот что у вас должно получиться в итоге: Тынц…

      Ответить
  • NeedHate: 13 февраля, 2014 в 11:47

    Всё, разобрался. экспериментировал ооочень долго и много. Опыт конечно колоссальный. Но не расслабляйтесь: мои идеи скоро посетят ваш опыт. 8) Спасибо огромное!

    Ответить
  • Costea: 8 июля, 2015 в 18:43

    Или можно просто использовать bootstrap 🙂

    Ответить
    • driver: 9 июля, 2015 в 05:55

      Можно всё, кто же спорит, даже Машку за ляжку, тоже можно))) Статья совсем не о том, давайте начнём «письками мериться», перечисляя все известные фреймворки

      Ответить
  • Nugget: 6 октября, 2016 в 12:07

    Подскажите, как можно сделать плавное появление этой подсказки? У меня не получилось(((

    Ответить
    • driver: 6 октября, 2016 в 15:52

      Включил такую возможность по-умолчанию, просто добавил прозрачность opacity: и анимировал с помощью transition, см. пример в статье, код в песочнице обновил.

      Ответить

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>