Is there any way to use img alt as tooltip?

Question

I have a page with many images, here is an example:

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

I'd like to show tooltip without using title. Is it possible using only HTML, CSS or JavaScript?

Something like this:

Thanks.

Answer 1

Forgoing the fact that alt should not be used for a tool tip, really you should use title, or better still figure and figcaption, you can do this with CSS alone.

Use the :after psuedo element with hover then use content:attr(alt) to get the value of the alt attribute.

EDIT : Annoyingly this doesn't work in microsoft browsers as they don't support 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>

Here's how I'd actually do it with more semantically correct tags

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

Going this route you can have additional styling within the tool tip if needed

Answer 2

Check out this site on how to create tooltips using only HTML/CSS

Here's a snippet from the site:

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