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

19.07.2023 alexxlab

Содержание

всплывающих подсказок html css при наведении курсора, могу ли я сделать определенную ширину?

спросил 2 года, 4 месяца назад

Изменено 2 года, 4 месяца назад

Просмотрено 211 раз

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

 <стиль>
.подсказка {
  положение: родственник;
  отображение: встроенный блок;
  нижняя граница: 1 пиксель с черными точками;
}
.tooltip .tooltiptext {
  видимость: скрытая;
  ширина: 500 пикселей;
  цвет фона: черный;
  цвет: #fff;
  выравнивание текста: по левому краю;
  радиус границы: 6px;
  отступ: 5px 0;
  /* Размещение всплывающей подсказки */
  положение: абсолютное;
  z-индекс: 1;
  верх: -5px;
  слева: 0%;
}
. tooltip: наведение .tooltiptext {
  видимость: видимая;
}

Текст всплывающей подсказки установлен на 500 пикселей. Мне нужно определить каждый «промежуток» определенной ширины:

 <дел>
это текст для наведения
  <диапазон>
это всплывающая подсказка

Я пробовал несколько способов определения ширины ( ) ни один из них не работал.

HTML
CSS
наведение
всплывающая подсказка
встроенный

Вы можете сделать это, используя встроенный стиль. Удалите ширину из .tooltip и укажите ширину для каждого, например:

 <диапазон>

Лучше всего добавить идентификатор в разделы всплывающей подсказки.

Самый простой способ описать идентификатор — это уникальное имя элемента. Например, вместо классов, которые вы можете использовать для нескольких элементов. вы можете использовать идентификатор только для 1 элемента.

в базовом HTML и CSS это будет выглядеть примерно так:

html

 
    ИДЕНТИФИКАТОР ОДИН


<дел>
    ID ДВА

css

 #DivOne{
    высота: 200 пикселей;
    ширина: 200 пикселей;
    цвет фона: красный;
    белый цвет;
}
#DivTwo{
    высота: 200 пикселей;
    ширина: 200 пикселей;
    цвет фона: черный;
    белый цвет;
}

Привет @anothen,

Чтобы браузер учитывал ваш встроенный стиль, удалите правило свойства width из класса CSS .tooltiptext , и это сделает работу. Не забудьте добавить ширина встроенного стиля до диапазона, как в примере ниже.

И последнее, но не менее важное: для правил CSS span вам на самом деле не нужен синтаксис .

tooltip .tooltiptext , вы можете оставить его только с .tooltiptext , так как это просто влияет только на этот элемент.
Надеюсь, это поможет, приятель!
.подсказка { положение: родственник; отображение: встроенный блок; нижняя граница: 1 пиксель с черными точками; } .tooltiptext { видимость: скрытая; цвет фона: черный; цвет: #fff; выравнивание текста: по левому краю; радиус границы: 6px; отступ: 6px; поле: 0 авто; /* Размещение всплывающей подсказки */ положение: абсолютное; z-индекс: 1; верх: -5px; слева: 0%; } .tooltip: наведение .tooltiptext { видимость: видимая; }

<дел> Это текст для наведения <диапазон> Это всплывающая подсказка
0
Разобрался, заработало, только кеш забыл отключить.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Создайте простую, но стильную всплывающую подсказку с помощью CSS
Что такое всплывающие подсказки?
Всплывающие подсказки — отличный способ показать дополнительную информацию при наведении курсора на изображение или текст, не нарушая пользовательский интерфейс. Подсказки используются для отображения подписей к изображениям и предоставления полезной информации для ссылок или значения слова. Он может иметь разные стили и позиции и может содержать разные типы контента, включая текст, HTML, изображения и видео. Простые всплывающие подсказки легко создавать с помощью HTML и CSS. Сегодня мы узнаем, как создать простую всплывающую подсказку с помощью CSS, а затем как расположить ее сверху, слева, справа и снизу.
HTML-разметка
Начнем с создания HTML-разметки для всплывающей подсказки. Определите 2 элемента span с отношениями родитель-потомок. Родительский элемент span имеет текст, на котором будет отображаться всплывающая подсказка. Внутренний или дочерний элемент span имеет текст всплывающей подсказки. Это будет скрыто по умолчанию.

Верх Я никогда не проигрываю. Либо я побеждаю, либо учусь.
Как видите, в HTML используются 3 класса CSS: tooltip, tooltiptext и tooltip-top. Мы увидим это в деталях в следующем разделе.
CSS
Существует 2 основных класса CSS для создания всплывающей подсказки и 4 других с 4 сторон (сверху, слева, справа и снизу). Класс CSS всплывающей подсказки будет стилизовать текст родительского элемента span. Он создает нижнюю пунктирную рамку текста и устанавливает для нее относительное положение, что помогает позиционировать текст всплывающей подсказки в абсолютном месте.
.подсказка { положение: родственник; отображение: встроенный блок; нижняя граница: 1px с серыми точками; цвет: #005050; }

CSS-класс tooltiptext выполняет следующие функции.
Скрывает текст всплывающей подсказки.
Стиль текста всплывающей подсказки и установка абсолютного положения.
Создает закругленный угол вокруг текста всплывающей подсказки с помощью атрибута border-radius.
Добавляет к нему основные стили: ширина 180 пикселей, цвет фона, белый цвет текста, текст по центру, отступ 2 пикселя и непрозрачность до 0.

.tooltip .tooltiptext { видимость: скрытая; положение: абсолютное; ширина: 180 пикселей; цвет фона: #555; цвет: #fff; выравнивание текста: по центру; отступ: 2px; радиус границы: 5px; z-индекс: 1; непрозрачность: 0; переход: непрозрачность .6s; }
Поскольку всплывающая подсказка отображается при наведении курсора, используйте селектор CSS :hover. Селектор :hover выбирает элементы, когда вы наводите на них курсор. Класс CSS устанавливает видимость как видимую, а непрозрачность — 1.
.tooltip:hover .tooltiptext { видимость: видимая; непрозрачность: 1; }
Этих трех классов CSS достаточно для создания простой всплывающей подсказки, но мы не можем контролировать их расположение. Чтобы установить положение всплывающей подсказки (сверху, слева, справа и снизу), определите класс CSS для каждой стороны.

.всплывающая подсказка { низ: 90%; поле слева: -60px; } .tooltip-левый { верх: -5px; справа: 128%; } . tooltip-нижняя { верх: 100% поле слева: -60px; } .tooltip-право { верх: -5px; слева: 125%; }
Вам необходимо использовать соответствующий CSS, основанный на ваших предпочтениях отображения всплывающей подсказки вокруг текста.
Полный код CSS:
.tooltip { положение: родственник; отображение: встроенный блок; нижняя граница: 1px с серыми точками; цвет: #005050; } .tooltip .tooltiptext { видимость: скрытая; положение: абсолютное; ширина: 180 пикселей; цвет фона: #555; цвет: #fff; выравнивание текста: по центру; отступ: 2px; радиус границы: 5px; z-индекс: 1; непрозрачность: 0; переход: непрозрачность .6s; } .tooltip: наведение .tooltiptext { видимость: видимая; непрозрачность: 1; } .тултип-верх { внизу: 90%; поле слева: -60px; } .tooltip-левый { верх: -5px; справа: 128%; } .tooltip-нижняя { верх: 100% поле слева: -60px; } .tooltip-право { верх: -5px; слева: 125%; }

Это все, что нужно для создания простой всплывающей подсказки.