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

Стоит сказать, что для этого существует множество способов реализации, но почти все они предполагают большую нагрузку из-за множества эффектов. Мой способ прост тем, что практически не грузит браузер и не требует загрузок картинок. Перейдем непосредственно к описанию.

1. Скачайте следующий архив: podskazka.rar.

2. В архиве будет лежать единственный файлик podskazka.js :

3. Включите этот файл к себе на сайт (можете его переименовать). Для этого в любом месте сайта напишите:

Настройка
В самом верху файлика podskazka.js будут следующие строки:

В параметре qTipTag указывается для каких html тегов будет работать подсказка. В qTipX задается отступ всплывающей подсказки по оси Х, в qTipY по оси У. Эти параметры можно менять и делать так, как Вам удобно. Я остановился именно на этих значениях.

4. Теперь нужно прописать стиль для нашей подсказки, чтобы она выводилась в красивой рамке. Для этого отройте Ваш файл со стилями .css (стили) и пропишите в конце:

Здесь есть четыре важных параметра:

  • border: 1px solid #666 — задание толщины рамки и её цвета
  • background: #e6fff5 — задание фона рамки
  • font-size: 14px — размер шрифта
  • color: #000 — цвет шрифта

Эти параметры нужно настраивать конкретно под Вашу цветовую гамму на сайте (см. коды html цветов для сайта).

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

Если в вашем тексте есть гиперссылки (на web-сайт или на текст внутри этого же документа), вы можете добавить к ним подсказки, которые будут показываться при наведении на ссылки курсора мышки.

Например, вот так:

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

В меню Вставка (Insert) выберите команду Гиперссылка (Hyperlink). Можно и по-другому: щелкните на нужном слове правой кнопкой мыши и из контекстного меню выберите эту же команду. Откроется диалоговое окно как на скриншоте ниже:

Щелкните на кнопке Подсказка (ScreenTip). Появится небольшое окошко с полем для ввода текста вашей подсказки. Введите текст подсказки.

Нажмите кнопку ОК , чтобы закрыть это окно.

Если необходимо, то добавьте или измените данные гиперссылки в полях Текст (Text to Display) и Адрес (Address).

  • Нажмите ОК .
  • Вы можете помочь в развитии сайта, сделав пожертвование:

    —> Или помочь сайту популярной криптовалютой:

    BTC Адрес: 1Pi3a4c6sJPbfF2sSYR2noy61DMBkncSTQ

    ETH Адрес: 0x7d046a6eaa1bd712f7a6937b042e9eee4998f634

    LTC Адрес: LUyT9HtGjtDyLDyEbLJZ8WZWGYUr537qbZ

    USDT (ERC-20) Адрес: 0x7d046a6eaa1bd712f7a6937b042e9eee4998f634

    Яндекс Деньги: 410013576807538

    А тут весь список наших разных крипто адресов, может какой добрый человек пожертвует немного монет или токенов — получит плюсик в карму от нас 🙂 Благо Дарим, за любую помощь! —>

    Подсказки ( tooltips, screentips ), отображаемые браузером при наведении на объект или ссылку – отличный способ сообщить что-либо посетителю сайта.

    Сама идея подсказок была популяризована приложениями вроде Microsoft Word , которые имели множество командных кнопок с пиктограммами. Подсказки объясняли действие команды пользователю, когда тот задерживал указатель мыши над кнопкой.

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

    • Знание основ CSS ;
    • Немного свободного времени и терпения.

    • Позиционирование подсказок сверху, снизу, справа или слева от ссылки
      • Стили
      • Изменение цвета подсказки
      • Добавление анимации к подсказке
      • Отображение картинки в подсказке
      • Заключение

    Позиционирование подсказок сверху, снизу, справа или слева от ссылки

    Начнём с создания разметки. Текст подсказки будет находиться в элементе span . Присвоим класс каждой ссылке, чтобы затем стилизовать их:

    Стили

    Теперь, когда разметка готова, зададим оформление ссылок:

    Как видите, наши подсказки являются строчными ( inline ) элементами с относительным позиционированием. Добавим подсказкам визуальной привлекательности, поместив их в прямоугольник со скруглёнными краями. Позиционированием подсказок мы будем управлять с помощью полей ( margin ) и свойства position:

    Селектор :hover поможет нам сделать подсказки видимыми, когда это нужно. А :after определит окончательное местоположение подсказки.

    Изменение цвета подсказки

    Теперь, когда мы задали основу подсказки, изменить её отдельные параметры вроде цвета не составит труда. Во-первых, нужно задать цвет фона (атрибут background ) элемента span :

    Во-вторых, цвет рамки должен соответствовать цвету фона. Мы внесём соответствующую правку в селектор :after .

    В нижеприведённом примере мы изменим цвет подсказки, располагающейся снизу ссылки. Поэтому манипуляции нужно проводить со свойством border-bottom :

    Добавление анимации к подсказке

    Возможности CSS3 позволяют нам добавить современно выглядящие эффекты к нашим подсказкам. Давайте научимся пользоваться эффектами угасания ( fading ) и скольжения ( sliding ).

    Чтобы создать эффект угасания, необходимо манипулировать прозрачностью элемента span в обычном состоянии и с наведённым на него указателем мыши с использованием свойства transition . Всё это реализует следующий код:

    Заметьте, что функция перехода ease-in-out обеспечивает наиболее плавное возникновение и угасание подсказки.

    Также можно ещё создать эффект прыгающего мяча при помощи свойства translate3d селектора :hover . Для этого добавьте в селектор следующий код:

    Отображение картинки в подсказке

    Следующая задача – самая простая в нашем сегодняшнем уроке. Просто поместите картинку в span и задайте ссылке соответствующий класс. Если вы хотите добавить также и текст, отрегулируйте соответствующим образом размер изображения. Вот пример разметки:

    Заключение

    Готово! Теперь вы научились делать замечательные, красочные подсказки, используя HTML и CSS3 . Хотя сделать несколько подсказок вручную не составляет труда, в больших проектах имеет смысл применить такие средства, как CSS -библиотека Hint.css или jQuery -библиотека tooltipster.js .

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

    target

    По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . Синтаксис следующий.

    В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие.

    • _blank — загружает страницу в новое окно браузера.
    • _self — загружает страницу в текущее окно (это значение задается по умолчанию).
    • _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self .
    • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .

    В примере 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.

    Пример 8.4. Открытие ссылки в новом окне

    Атрибут target корректно использовать только при переходном , при строгом будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

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

    title

    Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает. Синтаксис следующий.

    В качестве значения указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. В примере 8.5 показано, как использовать атрибут title для ссылок.

    Пример 8.5. Создание всплывающей подсказки

    Результат данного примера показан на рис. 8.8.

    Рис. 8.8

    Рис. 8.8. Вид всплывающей подсказки в браузере

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

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

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

    Чтобы добавить всплывающую подСказку для фигуры, выделите ее.

    На вкладке Вставка нажмите кнопку Подсказка.

    Введите текст подсказки, а затем нажмите кнопку ОК.

    Чтобы увидеть всплывающую подСказку, наведите указатель мыши на фигуру.

    Чтобы изменить или удалить всплывающую подСказку, выделите ее. Нажмите кнопку Вставить подсказку _гт_, измените или удалите текст, а затем нажмите кнопку ОК.

    Примечание: Текст подсказки нельзя форматировать или распечатывать.

    Как сделать ссылку подсказку