htmlimagealt

Is there any way to use img alt as tooltip?

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:

Tooltip

Thanks.

Solution

  • 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