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

Question

我有一个页面有很多张图片，这里是一个例子：

<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？

像这样：

谢谢。

Answer 1

查看 this site 如何仅使用 HTML/CSS

创建工具提示

这是该网站的一个片段：

<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>

Answer 2

放弃 alt 不应该用于工具提示这一事实，实际上你应该使用 title，或者更好的是 figure 和 figcaption，你可以单独使用 CSS 即可。

使用带有 hover 的 :after 伪元素，然后使用 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>

按照这条路线，如果需要，您可以在工具提示中添加其他样式

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

Is there any way to use img alt as tooltip?

html

image

alt