Главная » Сниппеты » Простые подсказки на CSS3 и HTML5

Простые подсказки на 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(скругление углов), что совсем не критично, выдаёт подсказки в лучшем виде.
Надеюсь, этот простенький сниппет, кому-нибудь пригодится в качестве шпаргалки, а появятся вопросы, или новые идеи в тему, пишите в комментариях, обязательно рассмотрим и обсудим.

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

11 комментариев
  1. NeedHate says:

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

    Ответить
    • driver says:

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

      Ответить
  2. NeedHate says:

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

    Ответить
    • driver says:

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

      Ответить
  3. NeedHate says:

    Продолжаем совершенствоваться:

    1. Изначальный вариант.

    2. Модифицированный.

    Обратите внимание на левую колонку. В модифицированном варианте сбиваются настройки «ссылки». Как можно «навязать» нужному, а то, что было — оставалось прежним?

    Скорее всего в моем моде я «начудил», но подскажите, как исправить?

    Ответить
    • driver says:

      Уберите в 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>

      Добавляете атрибут 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>

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

      Ну и, чтобы совсем отмести вопросы, вот что у вас должно получиться в итоге: Тынц...

      Ответить
  4. NeedHate says:

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

    Ответить
  5. Costea says:

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

    Ответить
    • driver says:

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

      Ответить
  6. Nugget says:

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

    Ответить
    • driver says:

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

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru