Как в HTML без CSS сделать тултип с картинкой?

HTML PHP

1 ответ

Хочется что-то вот такое:

&lt;a href="https://foo.com" title="&lt;img src='https://foo.com/image.jpg'&gt;" target="_blank"&gt; bar &lt;/a&gt;

<a href="https://foo.com" title="<img src='https://foo.com/image.jpg'>" target="_blank"> bar </a>

Дополнительно:

Я понимаю без js, но не используя css... Невозможно. И почему именно без сss?

Ответы:

Никак.
Это аккаунт для генерации контента на сайте? 336 вопросов по всем или практически всем возможным тегам сайта. И, судя по содержанию, сомнительного характера.

Возможно, какой-то прокси с другого сайта.
mahmudchon
Ну да, если не удалось дать полезный ответ, то надо хотя бы высказаться про личность автора вопроса. Это в рунете незыблемая традиция.
0xC0CAC01A, в чем заключается особенность, из-за которой невозможно css использовать?
Мне в html макс что приходит на ум из такого плана - это лишь тег abbr, но там в title лишь текст указывается.
mahmudchon, Хочется один HTML файл, а не традиционная россыпь, ну и минимализм кода.
0xC0CAC01A, минимализм? в чем? у вас становится больше HTML кода и меньше CSS?
FeST1VaL, думаю, что он имел ввиду с применением минимального набора инструментов.

А что вам мешает css инлайн стилем добавить? Можно даже картинку в base64 перевести и туда же интегрировать, чтобы не обращаться ни к каким сторонним ресурсам.

Ну, хотелось элегантного решения. Но, поскольку элегантность давно вышла во фронтенде из моды, то да, придётся огород городить. Кстати, есть где прототип такого решения, чтоб не убить два часа на изобретение своего велостпеда?

&lt;a href="" class="tooltip"&gt;   &lt;img src=""&gt;   Link &lt;/a&gt;

.tooltip {   position: relative; }  .tooltip &gt; img {   display: none;   position: absolute;   left: 0;   bottom: 100%; }  .tooltip:hover &gt; img {   display: block; }

.tooltip { position: relative; } .tooltip > img { display: none; position: absolute; left: 0; bottom: 100%; } .tooltip:hover > img { display: block; }

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Роман IT Ответ

Для создания тултипа с картинкой в HTML без использования CSS можно воспользоваться атрибутом title у тега img. Однако, у этого метода есть свои ограничения, например, нельзя изменить стиль тултипа или его расположение.

Пример кода:

<img src="image.jpg" alt="Image" title="Текст тултипа с картинкой">

Если вам нужно больше гибкости и возможности стилизации тултипа, то лучше использовать CSS. Вот пример кода, который позволит создать тултип с картинкой с использованием CSS:

HTML:

<div class="tooltip">
  <img src="image.jpg" alt="Image" class="tooltip-img">
  <span class="tooltip-text">Текст тултипа с картинкой</span>
</div>

<div class="tooltip"> <img src="image.jpg" alt="Image" class="tooltip-img"> <span class="tooltip-text">Текст тултипа с картинкой</span> </div>

CSS:

.tooltip {
  position: relative;
  display: inline-block;
}
 
.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}
 
.tooltip-img {
  width: 50px;
}
 
.tooltip:hover .tooltip-text {
  visibility: visible;
}

.tooltip { position: relative; display: inline-block; } .tooltip-text { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; } .tooltip-img { width: 50px; } .tooltip:hover .tooltip-text { visibility: visible; }

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ code-review Нужен ли код-ревью React/TypeScript проекта? 1 ответ

Как в HTML без CSS сделать тултип с картинкой?

Дополнительно:

Ответы:

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

Вам также может быть интересно

Ежедневно, круглосуточно