Всплывающая подсказка html при наведении на текст: Как добавить всплывающую подсказку к изображению?

Атрибуты HTML | HTML | CodeBasics

Разметка информации на странице включает в себя множество тонкостей и нюансов. Например, можно задавать не только тип элемента, но и передавать дополнительную информацию, которая будет обработана браузером. Наведите курсор на текст ниже:

Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера

При наведении мыши на элемент появилось небольшое окно с текстом «Всплывающая подсказка. Здесь можно указать дополнительную информацию». Такое поведение задаётся с помощью атрибутов — специальных конструкций, которые могут влиять на вывод информации на странице. Каждый тег в HTML имеет несколько стандартных атрибутов, которые записываются по шаблону атрибут="значение", где:

• Атрибут — название атрибута. Для появления всплывающей подсказки использовался атрибут title
• Значение — значение атрибута. Оно может быть разным, в зависимости от самого атрибута. В примере, в качестве значения, использовался текст, который должен быть выведен при наведении на элемент

Разметка примера со всплывающей подсказкой:

<p title="Всплывающая подсказка. Здесь можно указать дополнительную информацию">Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера</p>

Атрибут title можно использовать не только на параграфах, а на любом элементе страницы. Такие атрибуты называются глобальными, так как не зависят от элемента. В противовес им есть атрибуты, которые уникальны для одного или нескольких тегов. Например, атрибут colspan

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

Атрибуты могут неявно влиять на вывод информации. Например, при использовании языка стилей CSS, встречается атрибут class, задача которого — отделить похожие элементы друг от друга с помощью значения атрибута. О работе классов вы узнаете из курса по CSS, а сейчас важно знать, что этот атрибут никак не проявляет себя при выводе информации на страницу

<p>Параграф с классом lead</p>
<p>Параграф с классом mega-paragraph</p>

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

<p title="Этот элемент имеет несколько атрибутов">Параграф с несколькими атрибутами</p>

В этом уроке мы изучили понятие атрибута и их запись. Изучили работу атрибутов title и class, а также узнали о том, что атрибуты бывают глобальные и уникальные для HTML-элементов. Глобальные атрибуты могут быть использованы для любого тега, тогда как уникальные только для определённых

Задание

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

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

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

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

Полезное

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Howto use tooltip with javascript and css3

Дата и время публикации: 2017-04-27 8:45:40

 

---

1. Что это такое

Всплывающая подсказка удобное средство, чтобы снабдить кратким описанием посетителей на странице HTML, например указать, что делает та или иная ссылка с использованием атрибута «title» или элемента SPAN через каскадные таблицы CSS3, как иллюстрирует листинге 1.

1.

Листинг 1.1

   <a href="&num;" title="Инструкции для дальнейших действий" >ссылки с подсказкой</a>     

2. Использование каскадных таблиц CSS3

2.1 Простота использования

Данный способ позволяет получить всплывающую подсказкуДа-Да – это всплывающая подсказка, вид которой можно привести в соответствие с дизайном страницы HTML. При этом её легко можно встраивать в текст предложения в виде контейнера – видимого читателю текст и скрытый, содержащий текст подсказки, как показано в листинге 2.1.

Листинг 2.1

   <p>Данный способ позволяет получить 
   <span>всплывающую подсказку
   <span>Да-Да – это всплывающая подсказка
   </span></span> 
   . . . 
   </p>      

При этом, потребуется использовать два тега span и соответствующие классы каскадных таблиц:

2.2 Класс tooltip

Отвечает за оформление видимой части контейнера, как показано в листинге 2. 2.1

Листинг 2.2.1

.tooltip {
    position:      relative;         /* метод отображения текста – отн. места вставки        */        
    display:       inline-block;     /* с возможностью обтекания окружающие его элементами   */
    border-bottom: 1px dotted #004655; /* c выделением подчеркиванием пунктирной линией и      */  
    cursor:        pointer;          /* и изменением курсора на указатель при наведении "мышки" */   
}

В тоже время, не на всех устройствах существует возможность наведения указателя. Особенно, если идет речь о речевых браузерах и синтезаторах или устройствах, основанных на системе Брайля, для пользователей с ограниченной функцией слуха, или о планшетах и смартфонах, в которых он просто отсутствует за ненадобностью. Поэтому для того рода устройств в классе tooltip делаем настройки курсора по-умолчанию при помощи запроса @media, как показано в листинге 2.2.2 .

Листинг 2.2.2

@media screen and (max-device-width: 1024px) {
  . tooltip {pointer: default;}   /* делаем курсор по умолчанию там, где  */
                                 /* его невозможно будет увидеть     */
}

2.3 Класс tooltiptext

Как следует из листинга 2.3, данный класс «играет» только вместе с классом tooltip и придает форму и оформление всплывающей подсказки

Листинг 2.3

.tooltip .tooltiptext {
    visibility: hidden;        /* Снимаем видимость, пока не заиграет селектор     */
    width: auto;               /* при наведении пользователем курсора. Разрешаем   */      
    background-color: #004655; /* в динамике менять размер и устанавливаем цвет    */ 
    color: #E6FFFB;            /* текста и фона.                                   */        
    text-align: center;        /* Выравниваем по центру текст всплывающей подсказки,*/    
    border-radius: 6px;        /* округляем углы рамки,                            */
    padding: 5px 0;            /* Устанавливаем внутренний отступ текста от края   */
    position: absolute;        /* рамки подсказки и позицианируемся от края контейнера */
    z-index: 1;                /* с отображением наложением вторым слоем           */
    bottom: 125%;              /* Задаем в процентах, положение элемента отн.
    края родителя */
    left: 50%;                 /* и центрируем его в следующих двух строчках.      */ 
    margin-left: -50%;
    opacity: 0;               /* устанавливаем начальную прозрачность и            */ 
    transition: opacity 2s;   /* время затенения, которое установлено в селекторе  */    
    -webkit-transition: opacity 5s; /* псевдокласса ":hover", а так же   */ 
    -moz-transition: opacity 5s;    /* различные интерпретации для совместимости   */
    -o-transition: opacity 5s;      /* c другими браузерами                        */
}

2.4 Псевдоклассы :hover и :after

Оба псевдоклассы позволяют «вызывать» подсказку в контейнер при наведении курсора (:hover) и придание ей формы после отображения (:after). Соответственно, их определение представлено в листингах 2.4.1 и 2.4.2

Листинг 2.4.1

/* Псевдокласс "играет" после отображения подсказки  */
.tooltip .tooltiptext::after {
    content: "";                /* За счет применения свойств позиционирования */               
    position: absolute;         /* и вставки содержимого подсказке обретает    */
    top: 100%;                  /* красивую форму.                              */
    left: 50%;
    margin-left: -1%;
    border-width: 5px;
    border-style: solid;
    border-color: #004655 transparent transparent transparent;
} 

Листинг 2.4.2

/* Псевдокласс "играет" после отображения подсказки  */
.tooltip .tooltiptext::after {
    content: "";                /* За счет применения свойств позиционирования */               
    position: absolute;         /* и вставки содержимого подсказке обретает    */
    top: 100%;                  /* красивую форму.                             */
    left: 50%;
    margin-left: -1%;
    border-width: 5px;
    border-style: solid;
    border-color: #004655 transparent transparent transparent;
} 

3. Библиография

---

1) How to Add a Tooltip in HTML

2) How TO – Tooltip

3) Tooltip with HTML content without JavaScript

4) Creating tooltips using the title attribute of HTML

5) Использование CSS переходов

6) Медиа-запросы

7) transition

8) Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

html — Добавить текст при наведении без javascript, как мы наводим на репутацию пользователя

спросил 10 лет, 9 месяцев назад

Изменено 2 года назад

Просмотрено 430 тысяч раз

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

 наведите курсор

 
hover me
 

  ссылка для скачивания

 

 .hoverable {
  положение: родственник;
}
.hoverable> .hoverable__tooltip {
  дисплей: нет;
}
.hoverable:hover>.hoverable__tooltip {
  дисплей: встроенный;
  положение: абсолютное;
  верх: 1эм;
  слева: 1эм;
  фон: #888;
  граница: 1px сплошной черный;
} 

 <дел>
  Основной текст
  Текст при наведении