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

Question

[0xC0CAC01A]

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

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

Comments

[Noder SS]

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

Answer 1

[mahmudchon]

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

Comments

[dollar]

Возможно, какой-то прокси с другого сайта.

[0xC0CAC01A]

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

[mahmudchon]

0xC0CAC01A, в чем заключается особенность, из-за которой невозможно css использовать?
Мне в html макс что приходит на ум из такого плана - это лишь тег abbr, но там в title лишь текст указывается.

[0xC0CAC01A]

mahmudchon, Хочется один HTML файл, а не традиционная россыпь, ну и минимализм кода.

[FeST1VaL]

0xC0CAC01A, минимализм? в чем? у вас становится больше HTML кода и меньше CSS?

[mahmudchon]

FeST1VaL, думаю, что он имел ввиду с применением минимального набора инструментов.

Answer 2

[alexalexes]

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

Comments

[0xC0CAC01A]

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

Answer 3

[Сергей delphinpro]

<a href="" class="tooltip">
  <img src="">
  Link
</a>

.tooltip {
  position: relative;
}

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

.tooltip:hover > img {
  display: block;
}