有没有办法使用 img alt 作为工具提示？答案

【问题标题】：Is there any way to use img alt as tooltip?有没有办法使用 img alt 作为工具提示？
【发布时间】：2020-10-20 01:04:51
【问题描述】：

我有一个包含许多图片的页面，这是一个示例：

<section>
    <div><img src="capas/livro1.jpg" alt="Harry Potter e a Pedra Filosofal"></div>
    <div><img src="capas/livro2.jpg" alt="Harry Potter e a Câmara Secreta"></div>
    <div><img src="capas/livro3.jpg" alt="Harry Potter e o Prisioneiro de Azkaban"></div>
    <div><img src="capas/livro4.jpg" alt="Harry Potter e o Cálice de Fogo"></div>
    <div><img src="capas/livro5.jpg" alt="Harry Potter e o Enigma do Príncipe"></div>
    <div><img src="capas/livro6.jpg" alt="Harry Potter e a Ordem da Fênix"></div>
    <div><img src="capas/livro7.jpg" alt="Harry Potter e as Relíquias da Morte"></div>
    <div><img src="capas/livro8.jpg" alt="Pai Rico, Pai Pobre"></div>
    <div><img src="capas/livro9.jpg" alt="Quem Mexeu no Meu Queijo?"></div>
    <div><img src="capas/livro10.jpg" alt="O Guia do Pão Duro"></div>
.
.
.
</section>

我想在不使用title 的情况下显示工具提示。是否可以只使用 HTML、CSS 或 JavaScript？

类似这样的：

谢谢。

【问题讨论】：

是的，有办法，而且是可能的。事实上，在 Stack Overflow 上，关于在不使用 title 的情况下制作工具提示的问题有很多很多。您是否发现这些问题的答案缺乏？
还要考虑如果您使用alt 属性作为工具提示，您可能使用不正确。它应该用作屏幕阅读器等图像的替代描述。它不应该用于提供标题等附加信息。这就是title 属性的目的

标签： html image alt

【解决方案1】：

抛开alt 不应该用作工具提示这一事实，您应该使用title，或者更好的是figure 和figcaption，您可以单独使用CSS。

将:after 伪元素与hover 一起使用，然后使用content:attr(alt) 获取alt 属性的值。

编辑：令人讨厌的是，这在微软浏览器中不起作用，因为它们不支持img::after。

.covers>div {
  /*Tooltip will be positioned relative to this*/
  position: relative;
}

/*Tooltip magic*/
.covers img:hover:after {
  display: block;
  content: attr(alt);
  position: absolute;
  bottom: 5px;
  background-color: rgba(200, 200, 200, 0.8);
  border-radius:2px;
  padding:2px;
}

.covers img {
  min-height: 100px;
  max-width: 300px
}

<section class="covers">
  <div><img src="capas/livro1.jpg" alt="Harry Potter e a Pedra Filosofal"></div>
  <div><img src="capas/livro2.jpg" alt="Harry Potter e a Câmara Secreta"></div>
  <div><img src="capas/livro3.jpg" alt="Harry Potter e o Prisioneiro de Azkaban"></div>
  <div><img src="capas/livro4.jpg" alt="Harry Potter e o Cálice de Fogo"></div>
  <div><img src="capas/livro5.jpg" alt="Harry Potter e o Enigma do Príncipe"></div>
  <div><img src="capas/livro6.jpg" alt="Harry Potter e a Ordem da Fênix"></div>
  <div><img src="capas/livro7.jpg" alt="Harry Potter e as Relíquias da Morte"></div>
  <div><img src="capas/livro8.jpg" alt="Pai Rico, Pai Pobre"></div>
  <div><img src="capas/livro9.jpg" alt="Quem Mexeu no Meu Queijo?"></div>
  <div><img src="capas/livro10.jpg" alt="O Guia do Pão Duro"></div>
  . . .
</section>

这就是我实际使用语义更正确的标签的方法

.covers>figure {
  /*Tooltip will be positioned relative to this*/
  position: relative;
}

.covers>figure>figcaption {
  display:none;
}


/*Tooltip magic*/
.covers figure:hover > figcaption {
  display: block;
  position: absolute;
  bottom: 5px;
  right: 0;
  background-color: rgba(200, 200, 200, 0.8);
  border-radius: 2px;
  padding: 2px;
}

.covers figure {
  min-height: 100px;
}

<section class="covers">
  <figure><img src="capas/livro1.jpg" alt="Harry Potter e a Pedra Filosofal cover">
    <figcaption><strong>Harry Potter</strong> e a Pedra Filosofal</figcaption>
  </figure>
  <figure><img src="capas/livro2.jpg" alt="Harry Potter e a Câmara Secreta cover">
    <figcaption><strong>Harry Potter</strong> e a Câmara Secreta</figcaption>
  </figure>
  <figure><img src="capas/livro3.jpg" alt="Harry Potter e o Prisioneiro de Azkaban cover">
    <figcaption><strong>Harry Potter</strong> e o Prisioneiro de Azkaban</figcaption>
  </figure>
  <figure><img src="capas/livro4.jpg" alt="Harry Potter e o Cálice de Fogo cover">
    <figcaption><strong>Harry Potter</strong> e o Cálice de Fogo</figcaption>
  </figure>
  <figure><img src="capas/livro5.jpg" alt="Harry Potter e o Enigma do Príncipe cover">
    <figcaption><strong>Harry Potter</strong> e o Enigma do Príncipe</figcaption>
  </figure>
  <figure><img src="capas/livro6.jpg" alt="Harry Potter e a Ordem da Fênix cover">
    <figcaption><strong>Harry Potter</strong> e a Ordem da Fênix</figcaption>
  </figure>
  <figure><img src="capas/livro7.jpg" alt="Harry Potter e as Relíquias da Morte cover">
    <figcaption><strong>Harry Potter</strong> e as Relíquias da Morte</figcaption>
  </figure>
  <figure><img src="capas/livro8.jpg" alt="Pai Rico, Pai Pobre cover">
    <figcaption>Pai Rico, Pai Pobre</figcaption>
  </figure>
  <figure><img src="capas/livro9.jpg" alt="Quem Mexeu no Meu Queijo? cover">
    <figcaption>Quem Mexeu no Meu Queijo?</figcaption>
  </figure>
  <figure><img src="capas/livro10.jpg" alt="O Guia do Pão Duro cover">
    <figcaption>O Guia do Pão Duro</figcaption>
  </figure>
  . . .
</section>

如果需要，您可以在工具提示中添加其他样式

【讨论】：

第一个代码不起作用。我同意你的观点，语义上使用figure 和figcaption 更有意义。我会做的，谢谢。
你不觉得把标题写两次是多余的吗？我的意思是，我们在 alt 和 figcaption 里面有同样的东西。
不幸的是，关于第一个 sn-p，您是对的。当应用于图像标签时，Microsoft 浏览器似乎对 ::after 有问题。在我看来，它不应该是多余的，因为alt 应该提供图像的文本描述。例如：“哈利波特与魔法石书的封面”，而不是标题或工具提示。这就是title 属性或figcaption 标签的作用，其中将包含“哈利波特与魔法石”。内容可能相似，但角色有重要区别。

【解决方案2】：

查看this site，了解如何仅使用 HTML/CSS 创建工具提示

这是来自网站的 sn-p：

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

【讨论】：

这个网站真的帮助了我。我正在研究它。谢谢